diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md b/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
index 1cecd3aae69381ce4de7ed37411a177b83db899d..c8321d7165e9324aca8eb87b69085070f82fec53 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-page-animation.md
@@ -21,22 +21,24 @@ ArkTS卡片开放了使用动画效果的能力，支持[显式动画](../refere
 ```ts
 @Entry
 @Component
-struct AttrAnimationExample {
+struct AnimationCard {
   @State rotateAngle: number = 0;
 
   build() {
-    Column() {
+    Row() {
       Button('change rotate angle')
+        .height('20%')
+        .width('90%')
+        .margin('5%')
         .onClick(() => {
-          this.rotateAngle = 90;
+          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
         })
-        .margin(50)
         .rotate({ angle: this.rotateAngle })
         .animation({
           curve: Curve.EaseOut,
-          playMode: PlayMode.AlternateReverse
+          playMode: PlayMode.Normal,
         })
-    }.width('100%').margin({ top: 20 })
+    }.height('100%').alignItems(VerticalAlign.Center)
   }
 }
 ```
diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
index b759f612959fe896f2dc1f8e25b74d13203ec24c..e69150e7ea9ad9d61a1a382ed1386d9e70ce2e5f 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -6,7 +6,7 @@ ArkTS卡片开放了自定义绘制的能力，在卡片上可以通过[Canvas](
 ```ts
 @Entry
 @Component
-struct WidgetCard {
+struct CanvasCard {
   private canvasWidth: number = 0;
   private canvasHeight: number = 0;
   // 初始化CanvasRenderingContext2D和RenderingContextSettings
diff --git a/zh-cn/application-dev/application-models/service-widget-overview.md b/zh-cn/application-dev/application-models/service-widget-overview.md
index f6c0368123f7994fe5205e875ddae6bd21da0192..943569f9b56cfbf5a459d5abe69af04cfd874754 100644
--- a/zh-cn/application-dev/application-models/service-widget-overview.md
+++ b/zh-cn/application-dev/application-models/service-widget-overview.md
@@ -58,6 +58,10 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征，在场景能力上
 
 ## 相关实例
 
+此文档中示例代码均有完整示例工程对应，具体对应关系如下：
+
+- [ArkTS卡片开发指导 - 开发卡片页面](https://gitee.com/openharmony/applications_app_samples/tree/master/code/DocsSample/Form/ArkTSCardDocsSample)
+
 针对Stage模型卡片提供方的开发，有以下相关实例可供参考：
 
 - [ArkTS音乐卡片（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/MusicControl)
@@ -69,3 +73,4 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征，在场景能力上
 - [ArkTS卡片Canvas小游戏（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/CanvasGame)
 
 - [ArkTS卡片计算器（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/Widget/ArkTSCard/Calculator)
+