|
@@ -1,6 +1,7 @@
|
|
import {
|
|
import {
|
|
Cell,
|
|
Cell,
|
|
CellGroup,
|
|
CellGroup,
|
|
|
|
+ Skeleton,
|
|
SkeletonAvatar,
|
|
SkeletonAvatar,
|
|
SkeletonParagraph,
|
|
SkeletonParagraph,
|
|
SkeletonTitle
|
|
SkeletonTitle
|
|
@@ -13,29 +14,37 @@ export default defineComponent({
|
|
setup(props) {
|
|
setup(props) {
|
|
return () => (
|
|
return () => (
|
|
<div class={styles.item}>
|
|
<div class={styles.item}>
|
|
- <CellGroup inset>
|
|
|
|
- <Cell center>
|
|
|
|
- {{
|
|
|
|
- title: () => <SkeletonParagraph rowWidth="52%" />,
|
|
|
|
- value: () => <SkeletonParagraph />
|
|
|
|
- }}
|
|
|
|
- </Cell>
|
|
|
|
- <Cell center>
|
|
|
|
- {{
|
|
|
|
- icon: () => <SkeletonAvatar />,
|
|
|
|
- title: () => (
|
|
|
|
- <div class={styles.name}>
|
|
|
|
- <SkeletonTitle />
|
|
|
|
- </div>
|
|
|
|
- ),
|
|
|
|
- value: () => (
|
|
|
|
- <div class={styles.price}>
|
|
|
|
- <SkeletonParagraph />
|
|
|
|
- </div>
|
|
|
|
- )
|
|
|
|
- }}
|
|
|
|
- </Cell>
|
|
|
|
- </CellGroup>
|
|
|
|
|
|
+ <Skeleton animate>
|
|
|
|
+ {{
|
|
|
|
+ template: () => (
|
|
|
|
+ <div style={{ width: '100%' }}>
|
|
|
|
+ <CellGroup inset>
|
|
|
|
+ <Cell center>
|
|
|
|
+ {{
|
|
|
|
+ title: () => <SkeletonParagraph rowWidth="52%" />,
|
|
|
|
+ value: () => <SkeletonParagraph />
|
|
|
|
+ }}
|
|
|
|
+ </Cell>
|
|
|
|
+ <Cell center>
|
|
|
|
+ {{
|
|
|
|
+ icon: () => <SkeletonAvatar />,
|
|
|
|
+ title: () => (
|
|
|
|
+ <div class={styles.name}>
|
|
|
|
+ <SkeletonTitle />
|
|
|
|
+ </div>
|
|
|
|
+ ),
|
|
|
|
+ value: () => (
|
|
|
|
+ <div class={styles.price}>
|
|
|
|
+ <SkeletonParagraph />
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ }}
|
|
|
|
+ </Cell>
|
|
|
|
+ </CellGroup>
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ }}
|
|
|
|
+ </Skeleton>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
}
|
|
}
|