diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc
index 08a83600..57f85702 100644
--- a/doric-Qt/example/app/qml.qrc
+++ b/doric-Qt/example/app/qml.qrc
@@ -43,4 +43,12 @@
         <file alias="util.mjs">../doric/resources/util.mjs</file>
         <file alias="gravity.mjs">../doric/resources/gravity.mjs</file>
     </qresource>
+
+    <qresource prefix="/resource/main/">
+        <file alias="pic_cp_gift_box.png">./resources/pic_cp_gift_box.png</file>
+        <file alias="icon_cp_gift_box_tips.png">./resources/icon_cp_gift_box_tips.png</file>
+        <file alias="pic_tab_welfare.png">./resources/pic_tab_welfare.png</file>
+        <file alias="pic_tab_condition.png">./resources/pic_tab_condition.png</file>
+        <file alias="pic_cp_invitation_2.png">./resources/pic_cp_invitation_2.png</file>
+    </qresource>
 </RCC>
diff --git a/doric-Qt/example/app/resources/icon_cp_gift_box_tips.png b/doric-Qt/example/app/resources/icon_cp_gift_box_tips.png
new file mode 100644
index 00000000..5b709caa
Binary files /dev/null and b/doric-Qt/example/app/resources/icon_cp_gift_box_tips.png differ
diff --git a/doric-Qt/example/app/resources/pic_cp_gift_box.png b/doric-Qt/example/app/resources/pic_cp_gift_box.png
new file mode 100644
index 00000000..237a9b68
Binary files /dev/null and b/doric-Qt/example/app/resources/pic_cp_gift_box.png differ
diff --git a/doric-Qt/example/app/resources/pic_cp_invitation_2.png b/doric-Qt/example/app/resources/pic_cp_invitation_2.png
new file mode 100644
index 00000000..29fb8c38
Binary files /dev/null and b/doric-Qt/example/app/resources/pic_cp_invitation_2.png differ
diff --git a/doric-Qt/example/app/resources/pic_tab_condition.png b/doric-Qt/example/app/resources/pic_tab_condition.png
new file mode 100644
index 00000000..91f166a1
Binary files /dev/null and b/doric-Qt/example/app/resources/pic_tab_condition.png differ
diff --git a/doric-Qt/example/app/resources/pic_tab_welfare.png b/doric-Qt/example/app/resources/pic_tab_welfare.png
new file mode 100644
index 00000000..7c7f29f8
Binary files /dev/null and b/doric-Qt/example/app/resources/pic_tab_welfare.png differ
diff --git a/doric-demo/src/SimpleDemo.ts b/doric-demo/src/SimpleDemo.ts
index 2105f569..6f212aa8 100644
--- a/doric-demo/src/SimpleDemo.ts
+++ b/doric-demo/src/SimpleDemo.ts
@@ -1,19 +1,86 @@
-import { Group, Panel, stack, Color, LayoutSpec, layoutConfig } from "doric";
+import { Group, Panel, stack, layoutConfig, scroller, Color, image, gravity, text } from "doric";
 
 @Entry
 class SimpleDemo extends Panel {
     build(rootView: Group) {
+        let tabImage = image({
+            imageRes: "qrc:/resource/main/pic_tab_welfare.png",
+            layoutConfig: layoutConfig().fit().configMargin({
+                top: 440,
+            })
+        })
         stack([
-            stack([
-                stack(
-                    [],
-                    {
-                        layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
-                        height: 50,
-                        backgroundColor: Color.RED
+            scroller(stack([
+                image({
+                    imageRes: "qrc:/resource/main/pic_cp_gift_box.png",
+                }),
+                image({
+                    imageRes: "qrc:/resource/main/icon_cp_gift_box_tips.png",
+                    layoutConfig: layoutConfig().fit().configMargin({
+                        top: 23,
+                        right: 23
+                    }).configAlignment(gravity().right())
+                }),
+                text({
+                    text: " 购买并开启1个誓言礼盒\r\n即可获得1个邀请组CP的道具",
+                    textColor: Color.parse("#66588D"),
+                    fontStyle: "bold",
+                    textSize: 14,
+                    layoutConfig: layoutConfig().fit().configAlignment(gravity().centerX()).configMargin({
+                        top: 110
+                    })
+                }),
+                image({
+                    imageRes: "qrc:/resource/main/pic_cp_invitation_2.png",
+                    layoutConfig: layoutConfig().fit().configAlignment(gravity().centerX()).configMargin({
+                        top: 166
+                    })
+                }),
+                text({
+                    text: "誓言邀请函",
+                    textColor: Color.parse("#FF5C6F"),
+                    fontStyle: "bold",
+                    textSize: 16,
+                    layoutConfig: layoutConfig().fit().configAlignment(gravity().centerX()).configMargin({
+                        top: 300
+                    })
+                }),
+
+                tabImage,
+                stack([], {
+                    layoutConfig: layoutConfig().just().configMargin({
+                        top: 440,
+                        left: 30
+                    }),
+                    width: 170,
+                    height: 48,
+                    onClick: () => {
+                        tabImage.imageRes = "qrc:/resource/main/pic_tab_welfare.png"
                     }
-                )
-            ])
-        ]).in(rootView)
+                }),
+                stack([], {
+                    layoutConfig: layoutConfig().just().configMargin({
+                        top: 440,
+                        left: 200
+                    }),
+                    width: 170,
+                    height: 48,
+                    onClick: () => {
+                        tabImage.imageRes = "qrc:/resource/main/pic_tab_condition.png"
+                    }
+                }),
+            ], {
+                width: 400,
+                height: 759,
+                layoutConfig: layoutConfig().just(),
+                backgroundColor: Color.RED
+            }), {
+                layoutConfig: layoutConfig().most(),
+            })
+        ], {
+            layoutConfig: layoutConfig().just(),
+            width: 400,
+            height: 600
+        }).in(rootView)
     }
 }
\ No newline at end of file