From 4372557a513d2633920cea92835107e1b4102c18 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 22 Aug 2024 18:35:31 +0800
Subject: [PATCH 1/2] feat(Badge): use new style

---
 site/mobile/mobile.config.js                |    2 +-
 src/badge/Badge.tsx                         |  138 +-
 src/badge/_example/base.jsx                 |   23 -
 src/badge/_example/base.tsx                 |   38 +
 src/badge/_example/button.jsx               |   40 -
 src/badge/_example/cell.jsx                 |   24 -
 src/badge/_example/{index.jsx => index.tsx} |   22 +-
 src/badge/_example/size.tsx                 |   19 +
 src/badge/_example/style/index.less         |   28 +-
 src/badge/_example/theme.tsx                |   35 +
 src/badge/badge.en-US.md                    |   21 +
 src/badge/badge.md                          |   15 +-
 src/badge/defaultProps.ts                   |   14 +
 src/badge/style/index.js                    |    2 +-
 src/badge/type.ts                           |    4 +-
 test/snap/__snapshots__/csr.test.jsx.snap   | 1539 ++++++++++++++++---
 test/snap/__snapshots__/ssr.test.jsx.snap   |   18 +-
 17 files changed, 1564 insertions(+), 418 deletions(-)
 delete mode 100644 src/badge/_example/base.jsx
 create mode 100644 src/badge/_example/base.tsx
 delete mode 100644 src/badge/_example/button.jsx
 delete mode 100644 src/badge/_example/cell.jsx
 rename src/badge/_example/{index.jsx => index.tsx} (57%)
 create mode 100644 src/badge/_example/size.tsx
 create mode 100644 src/badge/_example/theme.tsx
 create mode 100644 src/badge/badge.en-US.md
 create mode 100644 src/badge/defaultProps.ts

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index a915f7db..dfbf675e 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -73,7 +73,7 @@ export default {
     {
       title: 'Badge 徽标',
       name: 'badge',
-      component: () => import('tdesign-mobile-react/badge/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/badge/_example/index.tsx'),
     },
     {
       title: 'CountDown 倒计时',
diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
index b73ced72..3d8909dc 100644
--- a/src/badge/Badge.tsx
+++ b/src/badge/Badge.tsx
@@ -1,90 +1,106 @@
-import React, { forwardRef, useContext, useMemo } from 'react';
-import cls from 'classnames';
-import { ConfigContext } from '../config-provider';
+import React, { forwardRef, useMemo } from 'react';
+import classNames from 'classnames';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 import type { StyledProps } from '../common';
 import type { TdBadgeProps } from './type';
+import { badgeDefaultProps } from './defaultProps';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import useConfig from '../hooks/useConfig';
+import { usePrefixClass } from '../hooks/useClass';
 
 export interface BadgeProps extends TdBadgeProps, StyledProps {}
 
-function resolveOffset(ofs): number | string | undefined {
-  if (typeof ofs === 'undefined') return ofs;
-  if (Number.isNaN(ofs)) return;
-  if (typeof ofs === 'number') return (ofs * -1) as number;
-  return (ofs as string).startsWith('-') ? ofs.replace(/^-/, '') : `-${ofs}`;
-}
+const hasUnit = (unit: string) =>
+  unit.indexOf('px') > 0 ||
+  unit.indexOf('rpx') > 0 ||
+  unit.indexOf('em') > 0 ||
+  unit.indexOf('rem') > 0 ||
+  unit.indexOf('%') > 0 ||
+  unit.indexOf('vh') > 0 ||
+  unit.indexOf('vm') > 0;
 
-const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
-  const {
-    children,
-    className,
-    style,
-    color = '',
-    content,
-    count = 0,
-    dot = false,
-    maxCount = 99,
-    offset,
-    shape = 'circle',
-    showZero = false,
-    size = 'medium',
-    ...resetProps
-  } = props;
-  const { classPrefix } = useContext(ConfigContext);
-  const name = useMemo(() => `${classPrefix}-badge`, [classPrefix]);
-  const hasChildren = useMemo(() => !!(content || children), [content, children]);
-  // const isRibbon = useMemo(() => !dot && shape === 'ribbon', [shape, dot]);
+const Badge = forwardRef<HTMLDivElement, BadgeProps>((originProps, ref) => {
+  const props = useDefaultProps(originProps, badgeDefaultProps);
+  const { children, className, style, color, content, count, dot, maxCount, offset, shape, showZero, size } = props;
+
+  const { classPrefix } = useConfig();
+  const badgeClass = usePrefixClass('badge');
 
   // 徽标自定义样式
-  const computedStyle = useMemo(() => {
-    const mergedStyle = { ...style };
+  const badgeInnerStyles = useMemo(() => {
+    const mergedStyle: React.CSSProperties = {};
     if (color) mergedStyle.backgroundColor = color;
     if (offset && Array.isArray(offset)) {
-      const [right, top] = offset;
-      mergedStyle.right = resolveOffset(right);
-      mergedStyle.top = resolveOffset(top);
+      const [right = 0, top = 0]: Array<string | number> = offset;
+      mergedStyle.right = hasUnit(right.toString()) ? right : `${right}px`;
+      mergedStyle.top = hasUnit(top.toString()) ? top : `${top}px`;
     }
     return mergedStyle;
-  }, [style, color, offset]);
+  }, [color, offset]);
 
   // 徽标外层样式类
-  const badgeClasses = cls({
-    [`${name}`]: true,
-    // [`${name}__ribbon--outer`]: isRibbon,
+  const badgeClasses = classNames(className, {
+    [`${badgeClass}`]: true,
+    [`${badgeClass}__ribbon-outer`]: shape === 'ribbon',
   });
 
   // 徽标内层样式类
-  const badgeInnerClasses = cls(
-    {
-      [`${name}__inner`]: true,
-      [`${name}--dot`]: dot,
-      [`${name}--${shape}`]: !dot && shape,
-      [`${classPrefix}-badge--has-children`]: hasChildren,
-    },
-    size === 'small' ? `${name}--${size}` : `${name}--medium`,
-    className,
-  );
+  const badgeInnerClasses = classNames({
+    [`${badgeClass}--basic`]: true,
+    [`${badgeClass}--dot`]: dot,
+    [`${badgeClass}--${size}`]: true,
+    [`${badgeClass}--${shape}`]: true,
+    [`${badgeClass}--count`]: !dot && count,
+    [`${classPrefix}-has-count`]: true,
+  });
+
+  // 是否展示角标
+  const isShowBadge = useMemo(() => {
+    if (dot) {
+      return true;
+    }
+    if (!showZero && Number(count) === 0) {
+      return false;
+    }
+    if (count == null) return false;
+    return true;
+  }, [dot, count, showZero]);
 
-  const renderBadgeContent = useMemo(() => {
+  const readerCount = useMemo(() => {
     if (dot) return null;
-    if (typeof count === 'number') {
-      if (count === 0) {
+    if (isString(count) || isNumber(count)) {
+      if (Number(count) === 0) {
         return showZero ? count : null;
       }
-      return count >= +maxCount ? maxCount : count;
+      return Number(count) > Number(maxCount) ? `${maxCount}+` : count;
     }
-    return count;
+    return parseTNode(count);
   }, [dot, count, maxCount, showZero]);
 
-  const renderBadge = (
-    <div className={badgeInnerClasses} style={computedStyle}>
-      {renderBadgeContent}
-    </div>
-  );
+  const childNode = content || children;
+
+  const readerContent = () =>
+    childNode && (
+      <div className={`${badgeClass}__content`}>
+        <span className={`${badgeClass}__content-text`}>{parseTNode(childNode)}</span>
+      </div>
+    );
+
+  const readerBadge = () => {
+    if (!isShowBadge) return null;
+    return (
+      <div className={badgeInnerClasses} style={badgeInnerStyles}>
+        {readerCount}
+      </div>
+    );
+  };
 
   return (
-    <div ref={ref} className={badgeClasses} {...resetProps}>
-      {renderBadge}
-      {content || children}
+    <div ref={ref} className={badgeClasses} style={style}>
+      {readerContent()}
+      {readerBadge()}
     </div>
   );
 });
diff --git a/src/badge/_example/base.jsx b/src/badge/_example/base.jsx
deleted file mode 100644
index 212796ea..00000000
--- a/src/badge/_example/base.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Badge } from 'tdesign-mobile-react';
-
-export default function BadgeBaseDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <div className="badge-item">
-          <Badge dot>消息</Badge>
-        </div>
-        <div className="badge-item">
-          <Badge count="16">消息</Badge>
-        </div>
-        <div className="badge-item">
-          <Badge count="NEW">消息</Badge>
-        </div>
-        <div className="badge-item">
-          <Badge count="···">消息</Badge>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/base.tsx b/src/badge/_example/base.tsx
new file mode 100644
index 00000000..00276947
--- /dev/null
+++ b/src/badge/_example/base.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-mobile-react';
+import { NotificationIcon } from 'tdesign-icons-react';
+
+export default function BaseBadge() {
+  return (
+    <>
+      <div className="summary">红点徽标</div>
+      <div className="badge-demo">
+        <Badge dot className="badge-item" content="消息" />
+        <Badge dot offset={[1, -1]} className="badge-item">
+          <NotificationIcon size="24" />
+        </Badge>
+        <Badge dot offset={[1, 1]} className="badge-item">
+          <Button>按钮</Button>
+        </Badge>
+      </div>
+
+      <div className="summary">数字徽标</div>
+      <div className="badge-demo">
+        <Badge count="8" content="消息" offset={[-8, 0]} className="badge-item" />
+        <Badge count="2" offset={[-2, -2]} className="badge-item">
+          <NotificationIcon size="24" />
+        </Badge>
+        <Badge count="8" offset={[2, 2]} className="badge-item">
+          <Button>按钮</Button>
+        </Badge>
+      </div>
+
+      <div className="summary">自定义徽标</div>
+      <div className="badge-demo">
+        <Badge count="NEW" offset={[0, 2]}>
+          <Button icon={<NotificationIcon />} shape="square" size="large" />
+        </Badge>
+      </div>
+    </>
+  );
+}
diff --git a/src/badge/_example/button.jsx b/src/badge/_example/button.jsx
deleted file mode 100644
index 6b00faa8..00000000
--- a/src/badge/_example/button.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { Badge, Button } from 'tdesign-mobile-react';
-
-export default function BadgeButtonDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <div className="badge-item">
-          <Badge dot>
-            <Button size="small" variant="outline">
-              小按钮
-            </Button>
-          </Badge>
-        </div>
-        <div className="badge-item">
-          <Badge count="16">
-            <Button size="small" variant="outline">
-              小按钮
-            </Button>
-          </Badge>
-        </div>
-
-        <div className="badge-item">
-          <Badge count="NEW">
-            <Button size="small" variant="outline">
-              小按钮
-            </Button>
-          </Badge>
-        </div>
-        <div className="badge-item">
-          <Badge count="···">
-            <Button size="small" variant="outline">
-              小按钮
-            </Button>
-          </Badge>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/cell.jsx b/src/badge/_example/cell.jsx
deleted file mode 100644
index 828409ee..00000000
--- a/src/badge/_example/cell.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Badge, CellGroup, Cell } from 'tdesign-mobile-react';
-
-export default function BadgeCellDemo() {
-  return (
-    <div className="tdesign-mobile-demo" style={{ paddingTop: 10 }}>
-      <CellGroup style={{ overflow: 'hidden' }}>
-        <Cell title="单行标题" arrow note={<Badge dot />}></Cell>
-        <Cell title="单行标题" arrow note={<Badge count={16} />}></Cell>
-        <Cell
-          title="单行标题"
-          arrow
-          note={
-            <>
-              <Badge count="NEW" shape="round" />
-              <Badge count="NEW" style={{ marginLeft: '8px' }} />
-            </>
-          }
-        ></Cell>
-        <Cell title="单行标题" note={<Badge count="NEW" shape="ribbon" />}></Cell>
-      </CellGroup>
-    </div>
-  );
-}
diff --git a/src/badge/_example/index.jsx b/src/badge/_example/index.tsx
similarity index 57%
rename from src/badge/_example/index.jsx
rename to src/badge/_example/index.tsx
index e72cfc0b..96b7c97f 100644
--- a/src/badge/_example/index.jsx
+++ b/src/badge/_example/index.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import BaseDemo from './base';
-import ButtonDemo from './button';
-import CellDemo from './cell';
+
+import BaseBadge from './base';
+import ThemeBadge from './theme';
+import SizeBadge from './size';
+
 import './style/index.less';
 
 export default function BadgeDemo() {
   return (
-    <div className="badge-demo">
+    <div className="tdesign-mobile-demo">
       <TDemoHeader title="Badge 徽标" summary="用于告知用户，该区域的状态变化或者待处理任务的数量。" />
-      <TDemoBlock title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
-        <BaseDemo />
+      <TDemoBlock title="01 组件类型">
+        <BaseBadge />
       </TDemoBlock>
-      <TDemoBlock>
-        <ButtonDemo />
+      <TDemoBlock title="02 组件样式">
+        <ThemeBadge />
       </TDemoBlock>
-      <TDemoBlock>
-        <CellDemo />
+      <TDemoBlock title="03 组件尺寸">
+        <SizeBadge />
       </TDemoBlock>
     </div>
   );
diff --git a/src/badge/_example/size.tsx b/src/badge/_example/size.tsx
new file mode 100644
index 00000000..16373bf0
--- /dev/null
+++ b/src/badge/_example/size.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function SizeBadge() {
+  return (
+    <>
+      <div className="summary">Large</div>
+      <div className="block">
+        <Avatar icon={<UserIcon />} size="large" badgeProps={{ count: 8, size: 'large', offset: [7, 7] }} />
+      </div>
+
+      <div className="summary">Middle</div>
+      <div className="block">
+        <Avatar icon={<UserIcon />} badgeProps={{ count: 8, offset: [5, 5] }} />
+      </div>
+    </>
+  );
+}
diff --git a/src/badge/_example/style/index.less b/src/badge/_example/style/index.less
index b812a887..06ffa54e 100644
--- a/src/badge/_example/style/index.less
+++ b/src/badge/_example/style/index.less
@@ -1,18 +1,16 @@
-.tdesign-mobile-demo {
-  .badge-demo {
-    display: flex;
-    padding: 16px 0;
-    width: 100%;
+.badge-demo {
+  display: flex;
+  margin-top: 28px;
+  margin-bottom: 24px;
+  margin-left: 16px;
+  align-items: center;
+  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
 
-    &__container {
-      width: 24%;
-      text-align: center;
-      position: relative;
-    }
-
-    .badge-item {
-      width: 24%;
-      text-align: center;
-    }
+  .badge-item {
+    margin-right: 48px;
   }
 }
+
+.block {
+  padding: 16px 16px 24px;
+}
diff --git a/src/badge/_example/theme.tsx b/src/badge/_example/theme.tsx
new file mode 100644
index 00000000..ad3a90bd
--- /dev/null
+++ b/src/badge/_example/theme.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Badge, Button, Cell } from 'tdesign-mobile-react';
+import { NotificationIcon, ShopIcon } from 'tdesign-icons-react';
+
+export default function ThemeBadge() {
+  return (
+    <>
+      <div className="summary">圆形徽标</div>
+      <div className="badge-demo">
+        <Badge count="2" offset={[-2, -2]}>
+          <NotificationIcon size="24" />
+        </Badge>
+      </div>
+
+      <div className="summary">方形徽标</div>
+      <div className="badge-demo">
+        <Badge count="2" shape="square" offset={[-2, -2]}>
+          <NotificationIcon size="24" />
+        </Badge>
+      </div>
+
+      <div className="summary">气泡徽标</div>
+      <div className="badge-demo">
+        <Badge count="领积分" shape="bubble">
+          <Button icon={<ShopIcon />} shape="square" size="large" />
+        </Badge>
+      </div>
+
+      <div className="summary" style={{ marginBottom: '16px' }}>
+        角标
+      </div>
+      <Cell title="单行标题" note={<Badge count="New" offset={[0, 0]} shape="ribbon" />}></Cell>
+    </>
+  );
+}
diff --git a/src/badge/badge.en-US.md b/src/badge/badge.en-US.md
new file mode 100644
index 00000000..51a6c0a2
--- /dev/null
+++ b/src/badge/badge.en-US.md
@@ -0,0 +1,21 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+color | String | - | \- | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+count | TNode | 0 | Typescript：`string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+dot | Boolean | false | \- | N
+maxCount | Number | 99 | \- | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon | N
+showZero | Boolean | false | \- | N
+size | String | medium | options: medium/large | N
diff --git a/src/badge/badge.md b/src/badge/badge.md
index 03e899e9..7eb84596 100644
--- a/src/badge/badge.md
+++ b/src/badge/badge.md
@@ -1,19 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Badge Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-children | TNode | - | 徽标内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+children | TNode | - | 徽标内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 color | String | - | 颜色 | N
-content | TNode | - | 徽标内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-count | TNode | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 徽标内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+count | TNode | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。TS 类型：`string \| number \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 dot | Boolean | false | 是否为红点 | N
 maxCount | Number | 99 | 封顶的数字值 | N
-offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string | number>` | N
-shape | String | circle | 形状。可选项：circle/round | N
+offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
+shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 showZero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
-size | String | medium | 尺寸。可选项：small/medium | N
+size | String | medium | 尺寸。可选项：medium/large | N
diff --git a/src/badge/defaultProps.ts b/src/badge/defaultProps.ts
new file mode 100644
index 00000000..a394baed
--- /dev/null
+++ b/src/badge/defaultProps.ts
@@ -0,0 +1,14 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBadgeProps } from './type';
+
+export const badgeDefaultProps: TdBadgeProps = {
+  count: 0,
+  dot: false,
+  maxCount: 99,
+  shape: 'circle',
+  showZero: false,
+  size: 'medium',
+};
diff --git a/src/badge/style/index.js b/src/badge/style/index.js
index 4ad483f7..c89cf8d6 100644
--- a/src/badge/style/index.js
+++ b/src/badge/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/badge/_index.less';
+import '../../_common/style/mobile/components/badge/v2/_index.less';
diff --git a/src/badge/type.ts b/src/badge/type.ts
index f848586b..1b787c7a 100644
--- a/src/badge/type.ts
+++ b/src/badge/type.ts
@@ -43,7 +43,7 @@ export interface TdBadgeProps {
    * 形状
    * @default circle
    */
-  shape?: 'circle' | 'round';
+  shape?: 'circle' | 'square' | 'bubble' | 'ribbon';
   /**
    * 当数值为 0 时，是否展示徽标
    * @default false
@@ -53,5 +53,5 @@ export interface TdBadgeProps {
    * 尺寸
    * @default medium
    */
-  size?: 'small' | 'medium';
+  size?: 'medium' | 'large';
 }
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 0af32b49..f4616760 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -276,6 +276,1015 @@ exports[`csr snapshot test > csr test src/back-top/_example/index.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    红点徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          消息
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+      />
+    </div>
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <svg
+            class="t-icon t-icon-notification"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+        style="right: 1px; top: -1px;"
+      />
+    </div>
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <button
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              按钮
+            </span>
+          </button>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+        style="right: 1px; top: 1px;"
+      />
+    </div>
+  </div>
+  <div
+    class="summary"
+  >
+    数字徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          消息
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+        style="right: -8px; top: 0px;"
+      >
+        8
+      </div>
+    </div>
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <svg
+            class="t-icon t-icon-notification"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+        style="right: -2px; top: -2px;"
+      >
+        2
+      </div>
+    </div>
+    <div
+      class="badge-item t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <button
+            class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
+            type="button"
+          >
+            <span
+              class="t-button__content"
+            >
+               
+              按钮
+            </span>
+          </button>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+        style="right: 2px; top: 2px;"
+      >
+        8
+      </div>
+    </div>
+  </div>
+  <div
+    class="summary"
+  >
+    自定义徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <button
+            class="t-button t-button--size-large t-button--base t-button--default t-button--square"
+            type="button"
+          >
+            <svg
+              class="t-icon t-icon-notification"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+        style="right: 0px; top: 2px;"
+      >
+        NEW
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Badge 徽标
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        用于告知用户，该区域的状态变化或者待处理任务的数量。
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="summary"
+        >
+          红点徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                消息
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+            />
+          </div>
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <svg
+                  class="t-icon t-icon-notification"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+              style="right: 1px; top: -1px;"
+            />
+          </div>
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <button
+                  class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
+                  type="button"
+                >
+                  <span
+                    class="t-button__content"
+                  >
+                     
+                    按钮
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+              style="right: 1px; top: 1px;"
+            />
+          </div>
+        </div>
+        <div
+          class="summary"
+        >
+          数字徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                消息
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+              style="right: -8px; top: 0px;"
+            >
+              8
+            </div>
+          </div>
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <svg
+                  class="t-icon t-icon-notification"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+              style="right: -2px; top: -2px;"
+            >
+              2
+            </div>
+          </div>
+          <div
+            class="badge-item t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <button
+                  class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"
+                  type="button"
+                >
+                  <span
+                    class="t-button__content"
+                  >
+                     
+                    按钮
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+              style="right: 2px; top: 2px;"
+            >
+              8
+            </div>
+          </div>
+        </div>
+        <div
+          class="summary"
+        >
+          自定义徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <button
+                  class="t-button t-button--size-large t-button--base t-button--default t-button--square"
+                  type="button"
+                >
+                  <svg
+                    class="t-icon t-icon-notification"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+              style="right: 0px; top: 2px;"
+            >
+              NEW
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          02 组件样式
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="summary"
+        >
+          圆形徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <svg
+                  class="t-icon t-icon-notification"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+              style="right: -2px; top: -2px;"
+            >
+              2
+            </div>
+          </div>
+        </div>
+        <div
+          class="summary"
+        >
+          方形徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <svg
+                  class="t-icon t-icon-notification"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
+              style="right: -2px; top: -2px;"
+            >
+              2
+            </div>
+          </div>
+        </div>
+        <div
+          class="summary"
+        >
+          气泡徽标
+        </div>
+        <div
+          class="badge-demo"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <span
+                class="t-badge__content-text"
+              >
+                <button
+                  class="t-button t-button--size-large t-button--base t-button--default t-button--square"
+                  type="button"
+                >
+                  <svg
+                    class="t-icon t-icon-shop"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
+            >
+              领积分
+            </div>
+          </div>
+        </div>
+        <div
+          class="summary"
+          style="margin-bottom: 16px;"
+        >
+          角标
+        </div>
+        <div
+          class="t-cell t-cell--middle"
+        >
+          <div
+            class="t-cell__left"
+          />
+          <div
+            class="t-cell__title"
+          >
+            单行标题
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            <div
+              class="t-badge t-badge__ribbon-outer"
+            >
+              <div
+                class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count"
+                style="right: 0px; top: 0px;"
+              >
+                New
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          03 组件尺寸
+        </h2>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="summary"
+        >
+          Large
+        </div>
+        <div
+          class="block"
+        >
+          <div
+            class="t-avatar t-size-l t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
+                  style="right: 7px; top: 7px;"
+                >
+                  8
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="summary"
+        >
+          Middle
+        </div>
+        <div
+          class="block"
+        >
+          <div
+            class="t-avatar t-avatar--circle"
+          >
+            <div
+              class="t-avatar__inner"
+            >
+              
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                  style="right: 5px; top: 5px;"
+                >
+                  8
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    Large
+  </div>
+  <div
+    class="block"
+  >
+    <div
+      class="t-avatar t-size-l t-avatar--circle"
+    >
+      <div
+        class="t-avatar__inner"
+      >
+        
+        <div
+          class="t-avatar__icon"
+        >
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
+            style="right: 7px; top: 7px;"
+          >
+            8
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="summary"
+  >
+    Middle
+  </div>
+  <div
+    class="block"
+  >
+    <div
+      class="t-avatar t-avatar--circle"
+    >
+      <div
+        class="t-avatar__inner"
+      >
+        
+        <div
+          class="t-avatar__icon"
+        >
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+            style="right: 5px; top: 5px;"
+          >
+            8
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    圆形徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <svg
+            class="t-icon t-icon-notification"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+        style="right: -2px; top: -2px;"
+      >
+        2
+      </div>
+    </div>
+  </div>
+  <div
+    class="summary"
+  >
+    方形徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <svg
+            class="t-icon t-icon-notification"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
+        style="right: -2px; top: -2px;"
+      >
+        2
+      </div>
+    </div>
+  </div>
+  <div
+    class="summary"
+  >
+    气泡徽标
+  </div>
+  <div
+    class="badge-demo"
+  >
+    <div
+      class="t-badge"
+    >
+      <div
+        class="t-badge__content"
+      >
+        <span
+          class="t-badge__content-text"
+        >
+          <button
+            class="t-button t-button--size-large t-button--base t-button--default t-button--square"
+            type="button"
+          >
+            <svg
+              class="t-icon t-icon-shop"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+      <div
+        class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
+      >
+        领积分
+      </div>
+    </div>
+  </div>
+  <div
+    class="summary"
+    style="margin-bottom: 16px;"
+  >
+    角标
+  </div>
+  <div
+    class="t-cell t-cell--middle"
+  >
+    <div
+      class="t-cell__left"
+    />
+    <div
+      class="t-cell__title"
+    >
+      单行标题
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      <div
+        class="t-badge t-badge__ribbon-outer"
+      >
+        <div
+          class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count"
+          style="right: 0px; top: 0px;"
+        >
+          New
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/button/_example/base.tsx 1`] = `
 <div>
   <div
@@ -1915,7 +2924,7 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = `
                     class="t-badge"
                   >
                     <div
-                      class="t-badge__inner t-badge--circle t-badge--medium"
+                      class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                     >
                       16
                     </div>
@@ -2188,7 +3197,7 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = `
                   class="t-badge"
                 >
                   <div
-                    class="t-badge__inner t-badge--circle t-badge--medium"
+                    class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   >
                     16
                   </div>
@@ -2910,7 +3919,7 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = `
             class="t-badge"
           >
             <div
-              class="t-badge__inner t-badge--circle t-badge--medium"
+              class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             >
               16
             </div>
@@ -3278,7 +4287,7 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = `
               class="t-badge"
             >
               <div
-                class="t-badge__inner t-badge--circle t-badge--medium"
+                class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
                 16
               </div>
@@ -3765,42 +4774,50 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
           class="t-badge"
         >
           <div
-            class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"
-          />
-          <div
-            class="t-image t-image--round"
+            class="t-badge__content"
           >
-            <div
-              class="t-image__mask"
+            <span
+              class="t-badge__content-text"
             >
               <div
-                class="t-loading t-loading--center"
-                style="font-size: 20px;"
+                class="t-image t-image--round"
               >
                 <div
-                  class="t-loading__dots"
-                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  class="t-image__mask"
                 >
                   <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                  />
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
                 </div>
+                <img
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                />
               </div>
-            </div>
-            <img
-              class="t-image__img t-image--fit-fill t-image--position-center"
-              src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-            />
+            </span>
           </div>
+          <div
+            class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+          />
         </div>
       </div>
       <div
@@ -3827,43 +4844,51 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
           class="t-badge"
         >
           <div
-            class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
-          >
-            8
-          </div>
-          <div
-            class="t-image t-image--round"
+            class="t-badge__content"
           >
-            <div
-              class="t-image__mask"
+            <span
+              class="t-badge__content-text"
             >
               <div
-                class="t-loading t-loading--center"
-                style="font-size: 20px;"
+                class="t-image t-image--round"
               >
                 <div
-                  class="t-loading__dots"
-                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  class="t-image__mask"
                 >
                   <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                  />
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
                 </div>
+                <img
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                />
               </div>
-            </div>
-            <img
-              class="t-image__img t-image--fit-fill t-image--position-center"
-              src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-            />
+            </span>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            8
           </div>
         </div>
       </div>
@@ -3891,43 +4916,51 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
           class="t-badge"
         >
           <div
-            class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
+            class="t-badge__content"
           >
-            13
-          </div>
-          <div
-            class="t-image t-image--round"
-          >
-            <div
-              class="t-image__mask"
+            <span
+              class="t-badge__content-text"
             >
               <div
-                class="t-loading t-loading--center"
-                style="font-size: 20px;"
+                class="t-image t-image--round"
               >
                 <div
-                  class="t-loading__dots"
-                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  class="t-image__mask"
                 >
                   <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                  />
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
                 </div>
+                <img
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                />
               </div>
-            </div>
-            <img
-              class="t-image__img t-image--fit-fill t-image--position-center"
-              src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-            />
+            </span>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            13
           </div>
         </div>
       </div>
@@ -3955,43 +4988,51 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
           class="t-badge"
         >
           <div
-            class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
-          >
-            NEW
-          </div>
-          <div
-            class="t-image t-image--round"
+            class="t-badge__content"
           >
-            <div
-              class="t-image__mask"
+            <span
+              class="t-badge__content-text"
             >
               <div
-                class="t-loading t-loading--center"
-                style="font-size: 20px;"
+                class="t-image t-image--round"
               >
                 <div
-                  class="t-loading__dots"
-                  style="animation-duration: 800ms; width: 20px; height: 20px;"
+                  class="t-image__mask"
                 >
                   <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                  />
-                  <div
-                    class="t-loading__dot"
-                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                  />
+                    class="t-loading t-loading--center"
+                    style="font-size: 20px;"
+                  >
+                    <div
+                      class="t-loading__dots"
+                      style="animation-duration: 800ms; width: 20px; height: 20px;"
+                    >
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                      />
+                      <div
+                        class="t-loading__dot"
+                        style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                      />
+                    </div>
+                  </div>
                 </div>
+                <img
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                />
               </div>
-            </div>
-            <img
-              class="t-image__img t-image--fit-fill t-image--position-center"
-              src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-            />
+            </span>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            NEW
           </div>
         </div>
       </div>
@@ -7503,42 +8544,50 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
                 class="t-badge"
               >
                 <div
-                  class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"
-                />
-                <div
-                  class="t-image t-image--round"
+                  class="t-badge__content"
                 >
-                  <div
-                    class="t-image__mask"
+                  <span
+                    class="t-badge__content-text"
                   >
                     <div
-                      class="t-loading t-loading--center"
-                      style="font-size: 20px;"
+                      class="t-image t-image--round"
                     >
                       <div
-                        class="t-loading__dots"
-                        style="animation-duration: 800ms; width: 20px; height: 20px;"
+                        class="t-image__mask"
                       >
                         <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                        />
+                          class="t-loading t-loading--center"
+                          style="font-size: 20px;"
+                        >
+                          <div
+                            class="t-loading__dots"
+                            style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          >
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                            />
+                          </div>
+                        </div>
                       </div>
+                      <img
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                      />
                     </div>
-                  </div>
-                  <img
-                    class="t-image__img t-image--fit-fill t-image--position-center"
-                    src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-                  />
+                  </span>
                 </div>
+                <div
+                  class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+                />
               </div>
             </div>
             <div
@@ -7565,43 +8614,51 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
                 class="t-badge"
               >
                 <div
-                  class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
-                >
-                  8
-                </div>
-                <div
-                  class="t-image t-image--round"
+                  class="t-badge__content"
                 >
-                  <div
-                    class="t-image__mask"
+                  <span
+                    class="t-badge__content-text"
                   >
                     <div
-                      class="t-loading t-loading--center"
-                      style="font-size: 20px;"
+                      class="t-image t-image--round"
                     >
                       <div
-                        class="t-loading__dots"
-                        style="animation-duration: 800ms; width: 20px; height: 20px;"
+                        class="t-image__mask"
                       >
                         <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                        />
+                          class="t-loading t-loading--center"
+                          style="font-size: 20px;"
+                        >
+                          <div
+                            class="t-loading__dots"
+                            style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          >
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                            />
+                          </div>
+                        </div>
                       </div>
+                      <img
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                      />
                     </div>
-                  </div>
-                  <img
-                    class="t-image__img t-image--fit-fill t-image--position-center"
-                    src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-                  />
+                  </span>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                >
+                  8
                 </div>
               </div>
             </div>
@@ -7629,43 +8686,51 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
                 class="t-badge"
               >
                 <div
-                  class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
-                >
-                  13
-                </div>
-                <div
-                  class="t-image t-image--round"
+                  class="t-badge__content"
                 >
-                  <div
-                    class="t-image__mask"
+                  <span
+                    class="t-badge__content-text"
                   >
                     <div
-                      class="t-loading t-loading--center"
-                      style="font-size: 20px;"
+                      class="t-image t-image--round"
                     >
                       <div
-                        class="t-loading__dots"
-                        style="animation-duration: 800ms; width: 20px; height: 20px;"
+                        class="t-image__mask"
                       >
                         <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                        />
+                          class="t-loading t-loading--center"
+                          style="font-size: 20px;"
+                        >
+                          <div
+                            class="t-loading__dots"
+                            style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          >
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                            />
+                          </div>
+                        </div>
                       </div>
+                      <img
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                      />
                     </div>
-                  </div>
-                  <img
-                    class="t-image__img t-image--fit-fill t-image--position-center"
-                    src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-                  />
+                  </span>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                >
+                  13
                 </div>
               </div>
             </div>
@@ -7693,43 +8758,51 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
                 class="t-badge"
               >
                 <div
-                  class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium"
-                >
-                  NEW
-                </div>
-                <div
-                  class="t-image t-image--round"
+                  class="t-badge__content"
                 >
-                  <div
-                    class="t-image__mask"
+                  <span
+                    class="t-badge__content-text"
                   >
                     <div
-                      class="t-loading t-loading--center"
-                      style="font-size: 20px;"
+                      class="t-image t-image--round"
                     >
                       <div
-                        class="t-loading__dots"
-                        style="animation-duration: 800ms; width: 20px; height: 20px;"
+                        class="t-image__mask"
                       >
                         <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                        />
-                        <div
-                          class="t-loading__dot"
-                          style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                        />
+                          class="t-loading t-loading--center"
+                          style="font-size: 20px;"
+                        >
+                          <div
+                            class="t-loading__dots"
+                            style="animation-duration: 800ms; width: 20px; height: 20px;"
+                          >
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                            />
+                            <div
+                              class="t-loading__dot"
+                              style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                            />
+                          </div>
+                        </div>
                       </div>
+                      <img
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/example1.png"
+                      />
                     </div>
-                  </div>
-                  <img
-                    class="t-image__img t-image--fit-fill t-image--position-center"
-                    src="https://tdesign.gtimg.com/mobile/demos/example1.png"
-                  />
+                  </span>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                >
+                  NEW
                 </div>
               </div>
             </div>
@@ -20702,6 +21775,14 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"<div class="tdesign-mobile-react-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">BackTop 返回顶部</h1><p class="tdesign-mobile-demo-header__summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">形状</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="button-group"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->半圆形返回顶部</span></button></div></div></div><div class="group"><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"<div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</h1><p class="tdesign-mobile-demo-header__summary">用于告知用户，该区域的状态变化或者待处理任务的数量。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"<div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"<div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div>"`;
 
 exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"<div class="row" data-reactroot=""><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->填充按钮</span></button></div>"`;
@@ -20724,13 +21805,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"<div>
 
 exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"<div class="section-theme" data-reactroot=""><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</h1><p class="tdesign-mobile-demo-header__summary">一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">单行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02</h2><p class="tdesign-mobile-demo-block__summary">多行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</h1><p class="tdesign-mobile-demo-header__summary">一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">单行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02</h2><p class="tdesign-mobile-demo-block__summary">多行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base" data-reactroot=""><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base" data-reactroot=""><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"<div class="divider-demo__title">水平分割线</div><div class="t-divider t-divider--horizontal t-divider--center" role="separator"><div class="t-divider__content"></div></div><div class="divider-demo__title">带文字水平分割线</div><div class="t-divider t-divider--horizontal t-divider--left" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--center" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--right" role="separator"><div class="t-divider__content">文字信息</div></div><div class="divider-demo__title" style="margin-bottom:10px">垂直分割线</div><div class="divider-wrapper"><span>文字信息</span><div class="t-divider t-divider--vertical t-divider--center" role="separator"><div class="t-divider__content"></div></div><span>文字信息</span><div class="t-divider t-divider--vertical t-divider--center" role="separator"><div class="t-divider__content"></div></div><span>文字信息</span></div>"`;
 
@@ -20738,7 +21819,7 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"<div data-reactroot=""><div class="divider-demo__title">虚线样式</div><div class="t-divider t-divider--horizontal t-divider--center t-divider--dashed" role="separator"><div class="t-divider__content"></div></div><div class="t-divider t-divider--horizontal t-divider--left t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--center t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--right t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"></div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">8</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">13</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">NEW</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">8</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">13</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">NEW</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
@@ -20750,7 +21831,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"<div cl
 
 exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Grid 宫格</h1><p class="tdesign-mobile-demo-header__summary">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带描述宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带边框宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带徽标宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"></div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">8</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">13</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">NEW</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">可滑动宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2><p class="tdesign-mobile-demo-block__summary">可传图标的宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">卡片宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Grid 宫格</h1><p class="tdesign-mobile-demo-header__summary">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带描述宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带边框宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带徽标宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">8</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">13</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">NEW</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">可滑动宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2><p class="tdesign-mobile-demo-block__summary">可传图标的宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">卡片宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"<div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ccfcde64..5663b425 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -4,6 +4,14 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"<div class="tdesign-mobile-react-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">BackTop 返回顶部</h1><p class="tdesign-mobile-demo-header__summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">形状</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="button-group"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->半圆形返回顶部</span></button></div></div></div><div class="group"><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"<div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</h1><p class="tdesign-mobile-demo-header__summary">用于告知用户，该区域的状态变化或者待处理任务的数量。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text">消息</span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"<div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></span></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></span></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"<div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div>"`;
 
 exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"<div class="row" data-reactroot=""><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->填充按钮</span></button></div>"`;
@@ -26,13 +34,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"<div>
 
 exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"<div class="section-theme" data-reactroot=""><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</h1><p class="tdesign-mobile-demo-header__summary">一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">单行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02</h2><p class="tdesign-mobile-demo-block__summary">多行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</h1><p class="tdesign-mobile-demo-header__summary">一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">单行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02</h2><p class="tdesign-mobile-demo-block__summary">多行单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div data-reactroot=""><div class="t-cell-group t-cell-group--undefined"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><button class="t-switch t-is-checked"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base" data-reactroot=""><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--medium">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base" data-reactroot=""><div><div class="t-cell-group t-cell-group--undefined t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><button class="t-switch"><span class="t-switch__text"></span><span class="t-switch__node"></span></button></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 00-4 4v3h8V7a4 4 0 00-4-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12v8h13v-8h-13zM9 15h6v2H9v-2z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"<div class="divider-demo__title">水平分割线</div><div class="t-divider t-divider--horizontal t-divider--center" role="separator"><div class="t-divider__content"></div></div><div class="divider-demo__title">带文字水平分割线</div><div class="t-divider t-divider--horizontal t-divider--left" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--center" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--right" role="separator"><div class="t-divider__content">文字信息</div></div><div class="divider-demo__title" style="margin-bottom:10px">垂直分割线</div><div class="divider-wrapper"><span>文字信息</span><div class="t-divider t-divider--vertical t-divider--center" role="separator"><div class="t-divider__content"></div></div><span>文字信息</span><div class="t-divider t-divider--vertical t-divider--center" role="separator"><div class="t-divider__content"></div></div><span>文字信息</span></div>"`;
 
@@ -40,7 +48,7 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `"<div data-reactroot=""><div class="divider-demo__title">虚线样式</div><div class="t-divider t-divider--horizontal t-divider--center t-divider--dashed" role="separator"><div class="t-divider__content"></div></div><div class="t-divider t-divider--horizontal t-divider--left t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--center t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div><div class="t-divider t-divider--horizontal t-divider--right t-divider--dashed" role="separator"><div class="t-divider__content">文字信息</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"></div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">8</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">13</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">NEW</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">8</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">13</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">NEW</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
@@ -52,7 +60,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"<div cl
 
 exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `"<div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Grid 宫格</h1><p class="tdesign-mobile-demo-header__summary">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带描述宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带边框宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带徽标宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"></div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">8</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">13</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__inner t-badge--circle t-badge--has-children t-badge--medium">NEW</div><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">可滑动宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2><p class="tdesign-mobile-demo-block__summary">可传图标的宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">卡片宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Grid 宫格</h1><p class="tdesign-mobile-demo-header__summary">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(5, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:20%"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">最多四个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多五个字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带描述宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带边框宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(3, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:33.333333333333336%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--bordered" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical t-grid-item--bordered" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">带徽标宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"></div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">8</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">13</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-badge"><div class="t-badge__content"><span class="t-badge__content-text"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></span></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">NEW</div></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题五字内</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">可滑动宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件样式</h2><p class="tdesign-mobile-demo-block__summary">可传图标的宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-share" style="font-size:24px"><use xlink:href="#t-icon-share"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">分享</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-star" style="font-size:24px"><use xlink:href="#t-icon-star"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">收藏</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-download" style="font-size:24px"><use xlink:href="#t-icon-download"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">保存</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="icon-wrapper"><svg class="t-icon t-icon-edit" style="font-size:24px"><use xlink:href="#t-icon-edit"></use></svg></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">编辑</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">卡片宫格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(4, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述文字</div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center;flex-basis:25%"><div class="t-grid-item__image t-grid-item__image--middle"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--middle">最多六个文字</div><div class="t-grid-item__description t-grid-item__description--vertical">描述最多六字</div></div></div></div><div class="t-grid grid-demo t-grid--card" style="padding:undefinedpx;grid-template-columns:repeat(2, 1fr);grid-gap:undefinedpx"><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div><div class="t-grid-item t-grid-item--horizontal" style="text-align:center;flex-basis:50%"><div class="t-grid-item__image t-grid-item__image--large"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--horizontal"><div class="t-grid-item__title t-grid-item__title--large">标题文字</div><div class="t-grid-item__description t-grid-item__description--horizontal">描述文字</div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"<div class="t-grid grid-demo t-grid--auto-size"><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div><div class="t-grid-item t-grid-item--vertical" style="text-align:center"><div class="t-grid-item__image t-grid-item__image--small"><div class="t-image t-image--round"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/example1.png"/></div></div><div class="t-grid-item__content t-grid-item__content--vertical"><div class="t-grid-item__title t-grid-item__title--small">标题文字</div><div class="t-grid-item__description t-grid-item__description--vertical"></div></div></div></div>"`;
 

From 1969281833df9d891c9a3a5b19a8db97ac669d39 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 22 Aug 2024 19:51:41 +0800
Subject: [PATCH 2/2] chore: update _common

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index d42b7fc2..f1adcf08 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit d42b7fc27b4e38a45ba28ff2ad50af060d8dd936
+Subproject commit f1adcf087ce845e27c6cedbdeb044a57130b7e8e