diff --git a/arkui/ace_standard/src/main/js/default/pages/input/router/index.css b/arkui/ace_standard/src/main/js/default/pages/input/router/index.css
index 4ab66f75df667f42c597537fa176f6cab83b5a32..96a247563d8beceec052fa1d7def08bcbab94af5 100644
--- a/arkui/ace_standard/src/main/js/default/pages/input/router/index.css
+++ b/arkui/ace_standard/src/main/js/default/pages/input/router/index.css
@@ -14,39 +14,500 @@
  */
 
 .container {
-    display: flex;
-    flex-direction: column;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-    height: 100%;
+  flex-direction:row;
+  width:100%;
+  height:100%;
+  padding: 1px;
 }
 
-.testDiv {
-    display: flex;
-    flex-direction: column;
-    left: 0px;
-    top: 0px;
-    width: 100%;
+.sub-container{
+  flex-direction: column;
+  height: 100%;
+  flex-weight: 1;
 }
 
-.title {
-    font-size: 40px;
-    text-align: center;
-    width: 100%;
-    height: 60px;
-    margin: 10px;
-    padding: 10px;
+.style-container{
+  flex-direction: column;
+  height: 70%;
 }
 
-@media screen and (orientation: landscape) {
-    .title {
-        font-size: 60px;
-    }
+.title{
+  width: 100%;
+  font-size: 18px;
+  margin: 2px;
+  padding: 2px;
+  font-weight: bold;
+  text-align: center;
 }
 
-@media screen and (device-type: tablet) and (orientation: landscape) {
-    .title {
-        font-size: 100px;
-    }
+.sub-title{
+  width: 100%;
+  font-size: 14px;
+  text-align: left;
+  margin: 2px;
+  padding: 2px;
+}
+
+.style1{
+  width: 100%;
+  height: 100%;
+  min-width: 25px;
+  min-height: 10px;
+  max-width: 300px;
+  max-height: 50px;
+  padding-left: 10px;
+  padding-top: 20px;
+  padding-right: 15px;
+  padding-bottom: 5px;
+  margin-left: 10px;
+  margin-top: 20px;
+  margin-right: 15px;
+  margin-bottom: 5px;
+  border-left-style: solid;
+  border-right-style: dashed;
+  border-top-style: dashed;
+  border-bottom-style: dotted;
+  border-left-width: 1px;
+  border-right-width: 2px;
+  border-top-width: 2px;
+  border-bottom-width: 1px;
+  border-left-color: #ff0000;
+  border-right-color: #00ff00;
+  border-top-color: #0000ff;
+  border-bottom-color: #fff000;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 15px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 12px;
+  background: linear-gradient(pink,#fff000);
+  box-shadow: 2px 4px 6px 8px #888888;
+  opacity: 0.5;
+  display: flex;
+  visibility: visible;
+  align-self: center;
+  image-fill: #000fff;
+  clip-path: margin-box;
+}
+
+.style2{
+  width: 50px;
+  height: 20px;
+  padding-start: 10px;
+  padding-end: 15px;
+  margin-start: 5px;
+  margin-end: 10px;
+  border-style: dotted;
+  border-width: 2px;
+  border-color:#000000;
+  border-radius:5px;
+  background-color:#ffaa00;
+  mask-image: url('common/images/icon.png');
+  mask-size: cover;
+  mask-position: center;
+}
+
+.style3{
+  width: 100%;
+  padding: 10px;
+  margin: 5px;
+  border-left: 1px solid #000000;
+  border-right:  2px dashed #00ff00;
+  border-top:  1.5px dotted #0000ff;
+  border-bottom:  2.5px dotted #fff000;
+  background-image:url('common/images/image.png');
+  background-size:cover;
+  background-repeat: repeat-x;
+  background-position: center;
+  flex:1;
+  flex-grow: 2;
+  flex-basis: 10px;
+  flex-shrink: 1;
+}
+
+.style4{
+  width: 60%;
+  height: 5%;
+  padding: 10px;
+  margin: 5px;
+  border: 2px solid #000000;
+}
+
+.contain1{
+  width: 100%;
+  height: 70px;
+  flex-direction: column;
+}
+
+.style5{
+  width: 50%;
+  height: 30px;
+  background-color: yellow;
+  border-image-source: url('/common/images/image.png');
+  border-image-slice: 1px 2px 3px 4px;
+  border-image-width: 2px 3px 4px 5px;
+  border-image-outset: 3px 4px 5px 6px;
+  border-image-repeat: repeat;
+}
+
+.style6{
+  width: 70px;
+  height: 30px;
+  position: absolute;
+  left: 10px;
+  top: 35px;
+  bottom: 5px;
+  right: 10px;
+  background-color: pink;
+  border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+  flex-direction: column;
+  flex-wrap:wrap;
+  justify-content:flex-start;
+  align-items: flex-end;
+  align-content:space-around;
+  display: flex;
+  height: 40px;
+}
+
+.style8{
+  flex-direction: row;
+  flex-wrap:nowrap;
+  scrollbar-color: yellow;
+  scrollbar-width: 10px;
+  overscroll-effect:spring;
+  height: 20px;
+  overflow:scroll;
+}
+.flex-item {
+  width: 50%;
+  height: 20px;
+  border-radius: 16px;
+}
+
+.style9{
+  flex-direction: row;
+  flex-wrap:nowrap;
+  scrollbar-color: yellow;
+  scrollbar-width: 10px;
+  overscroll-effect:spring;
+  height: 20px;
+  overflow:scroll;
+}
+
+.color-red {
+  color: red;
+}
+
+.color-white {
+  color: white;
+}
+.font-size16 {
+  font-size: 16;
+}
+.font-size20 {
+  font-size: 20;
+}
+.allow-scale{
+  allow-scale:true
+}
+.placeholder-color{
+  placeholder-color:pink
+}
+.font-weight3{
+  font-weight:300
+}
+.font-weight6{
+  font-weight:600
+}
+.color-success {
+  background-color: cornflowerblue;
+}
+
+.grid-child {
+  width: 100%;
+  border-radius: 2px;
+}
+
+.grid-left-top {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  border: 1px solid plum;
+  background: linear-gradient(pink, purple);
+  box-shadow: 0px 0px 1px 1px pink;
+  grid-row-start: 0;
+  grid-column-start: 0;
+  grid-row-end: 0;
+  grid-column-end: 0;
+}
+
+.grid-left-bottom {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  border: 1px solid plum;
+  background: linear-gradient(pink, #00aaee);
+  box-shadow: 0px 0px 1px 1px pink;
+  grid-row-start: 1;
+  grid-column-start: 0;
+  grid-row-end: 1;
+  grid-column-end: 0;
+}
+
+.grid-right-top {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  border: 1px dotted plum;
+  background: linear-gradient(mediumpurple, #00aaee);
+  box-shadow: 0px 0px 1px 1px pink;
+  grid-row-start: 0;
+  grid-column-start: 1;
+  grid-row-end: 0;
+  grid-column-end: 1;
+}
+
+.grid-right-bottom {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  border: 1px dotted plum;
+  background: linear-gradient(pink, mediumpurple);
+  box-shadow: 0px 0px 2px 2px pink;
+  grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-end: 1;
+  grid-column-end: 1;
+}
+
+.event-container{
+  flex-direction: column;
+  flex-weight: 1;
+}
+
+.event1{
+  width: 60%;
+  flex-weight: 1;
+  background-color: yellow;
+}
+
+.event2{
+  width: 70%;
+  flex-weight: 1;
+  background-color: red;
+}
+
+.event3{
+  width: 80%;
+  flex-weight: 1;
+  background-color: #ad4e2a;
+}
+
+.event4{
+  flex-direction: row;
+  width: 90%;
+  flex-weight: 1;
+  overflow:scroll;
+}
+
+.event5{
+  flex-direction: column;
+  width: 100%;
+  flex-weight: 1;
+  overflow:scroll;
+  background-color: blue;
+}
+
+.prop-container{
+  flex-direction: column;
+}
+
+#prop1 {
+  height: 15px;
+  background-color: mediumslateblue;
+  width: 100%;
+}
+
+.prop2 {
+  height: 15px;
+  background-color: pink;
+  width: 100%;
+}
+
+.prop3 {
+  height: 15px;
+  background-color: darkseagreen;
+  width: 100%;
+}
+.prop4 {
+  height: 15px;
+  background-color: red;
+  width: 100%;
+}
+.prop5 {
+  height: 15px;
+  background-color: purple;
+  width: 100%;
+}
+.prop6 {
+  height: 15px;
+  background-color: purple;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.ani-container{
+  flex-direction: column;
+  height: 100%;
+  flex-weight: 1;
+}
+
+.ani1{
+  background-color: #72ac33;
+  width: 55px;
+  height: 55px;
+  margin: 5px;
+  transform-origin: 0% 0%;
+  animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+  from {
+    background-color: #f76160;
+    opacity:0.3;
+    width:50px;
+    height: 50px;
+    transform:translate(20px) rotate(10deg) scale(0.2);
+    background-position:10% 10%
+  }
+  30% {
+    background-color: #60f761;
+    opacity:0.5;
+    width:70px;
+    height: 70px;
+    background-position:12% 12%;
+    transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+  }
+  to {
+    background-color: #6160f7;
+    opacity:1;
+    width:90px;
+    height: 90px;
+    background-position:22% 22%;
+    transform:rotate(180deg) scale(2)
+  }
+}
+
+.ani2{
+  background-color: #ad4e2a;
+  width: 55px;
+  height: 55px;
+  margin: 5px;
+}
+
+.gradient-container{
+  flex-direction: column;
+}
+
+.gradient1{
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+  flex-direction: column;
+}
+
+.access1{
+  background-color: #321124;
+  margin: 5px;
+  width: 90%;
+  height: 30px;
+}
+
+.atom-container{
+  flex-direction: column;
+}
+
+.multiMode-container{
+  flex-direction: column;
+}
+
+.multiMode1{
+  background-color: #978666;
+  width: 100%;
+  height: 30px;
+  margin: 5px;
+}
+
+.function-container{
+  flex-direction: column;
+}
+
+.function1{
+  background-color: #ff0000;
+  width: 60%;
+  height: 20px;
+}
+
+.function2{
+  background-color: #00ff00;
+  width: 60%;
+  height: 20px;
+}
+
+.function3{
+  background-color: #0000ff;
+  width: 100%;
+  height: 20px;
+}
+
+.function4{
+  flex-direction: row;
+  background-color: purple;
+  width: 20%;
+  height: 20px;
+  margin-bottom: 10px;
+}
+.function5{
+  flex-direction: row;
+  background-color: red;
+  width: 30%;
+  height: 20px;
+  margin-bottom: 10px;
+  margin-left: 2%;
+}
+.function6{
+  flex-direction: row;
+  background-color: yellow;
+  width: 20%;
+  height: 20px;
+  margin-bottom: 10px;
+  margin-left: 2%;
 }
\ No newline at end of file
diff --git a/arkui/ace_standard/src/main/js/default/pages/input/router/index.hml b/arkui/ace_standard/src/main/js/default/pages/input/router/index.hml
index f1a1ad0e5aeafb024a7f13c892c15ca7282990d3..018b2a137010579de8927436c83ab037e2f5f61b 100644
--- a/arkui/ace_standard/src/main/js/default/pages/input/router/index.hml
+++ b/arkui/ace_standard/src/main/js/default/pages/input/router/index.hml
@@ -14,28 +14,377 @@
  */-->
 
 <div class="container">
-    <div id="testDiv" class="testDiv">
+    <div class="sub-container">
+        <div class="style-container">
+            <text class="title">
+                通用样式
+            </text>
+            <text class="sub-title">
+                input通用样式1
+            </text>
+            <input class="style1" id="style1">
+            </input>
+            <text  class="sub-title">
+                input通用样式2
+            </text>
+            <input class="style2" id="style2">
+            </input>
+            <text class="sub-title">
+                input通用样式3
+            </text>
+            <input class="style3" id="style3">
+            </input>
+            <text  class="sub-title">
+                input通用样式4
+            </text>
+            <input class="style4" id="style4">
+            </input>
+            <text  class="sub-title">
+                input通用样式5
+            </text>
+            <div class="contain1">
+                <input class="style5" id="style5">
+                </input>
+                <input class="style6" id="style6">
+                </input>
+            </div>
+            <text  class="sub-title">
+                input特有样式1
+            </text>
+            <div class="style7" id="style7">
+                <input class="flex-item color-red font-size16" type="button" value="value">
+                </input>
+                <input class="flex-item color-white font-size20" type="button" value="value">
+                </input>
+            </div>
+            <text  class="sub-title">
+                input特有样式2
+            </text>
+            <div class="style8" id="style8">
+                <input class="flex-item color-primary allow-scale">
+                </input>
+                <input class="flex-item color-success placeholder-color" placeholder="placeholder">
+                </input>
+            </div>
+            <text  class="sub-title">
+                input特有样式3
+            </text>
+            <div class="style9" id="style9">
+                <input class="flex-item color-primary font-weight3" type="button" value="buttion"></input>
+                <input class="flex-item color-success font-weight6" type="button" value="buttion"></input>
+            </div>
+        </div>
+        <divider style="color: #000000; stroke-width: 2px;" vertical="false">
+        </divider>
+        <div class="ani-container">
+            <text class="title">
+                动画样式
+            </text>
+            <text class="sub-title">
+                input动画样式1
+            </text>
+            <input class="ani1" >
+            </input>
+            <text class="sub-title">
+                input动画样式2
+            </text>
+            <input class="ani2" >
+            </input>
+        </div>
+    </div>
+
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
+
+    <div class="sub-container">
+        <div class="prop-container">
+            <text class="title">
+                通用属性
+            </text>
+            <text class="sub-title">
+                input通用属性1
+            </text>
+            <input id="prop1" class="prop1"
+                 disabled = "true" focusable ="true"
+                 data-name ="prop1" click-effect="spring-medium"
+                 dir ="rtl">
+            </input>
+            <text  class="sub-title">
+                input通用属性2
+            </text>
+            <input class="prop2" ref ="prop2" id="prop2"
+                   disabled = "false" focusable ="false"
+                   data-name ="prop2" click-effect="spring-large"
+                   dir ="ltr">
+            </input>
+            <text  class="sub-title">
+                input通用属性3
+            </text>
+            <input style="color: #679855; margin: 1px;" class="prop3" id="prop3">
+            </input>
+            <text  class="sub-title">
+                input特有属性1
+            </text>
+            <input class="prop4" id="prop4"
+                    type="button"
+                    value="value"
+                   placeholder="placeholder"
+                   menuoptions="[{icon:'../../../common/images/icon.png',content:'content1'},{icon:'../../../common/images/icon.png',content:'content2'}]"
+                   autofocus="true"
+                   selectedstart="0"
+                   selectedend="10"
+                   softkeyboardenabled="false">
+            </input>
+            <text  class="sub-title">
+                input特有属性2
+            </text>
+            <input class="prop5" id="prop5"
+                    type="text"
+                   value=""
+                    placeholder=""
+                   maxlength="10"
+                   enterkeytype="go"
+                   headericon="../../../common/images/icon.png"
+                   showcounter="true"
+                   menuoptions=""
+                    autofocus="false"
+                   selectedstart=""
+                   selectedend=""
+                   softkeyboardenabled="true"
+                   showpasswordicon="false">
+            </input>
+            <div style="margin: 1px;">
+                <input if="false" class="prop2" ref ="prop2" style="background-color: rebeccapurple;">
+                </input>
+                <input elif="true" class="prop2" ref ="prop2" style="background-color: black;">
+                </input>
+                <input elif="false" class="prop2" ref ="prop2" style="background-color: blue;">
+                </input>
+                <input else class="prop2" ref ="prop2" style="background-color: yellow;">
+                </input>
+            </div>
+
+            <text  class="sub-title">
+                input特有属性3
+            </text>
+            <input class="prop6" id="prop6"
+                   type="password"
+                   showpasswordicon="true">
+            </input>
+            <input for="{{array}}" tid="id" style="color: #679855; margin: 1px;" class="prop3"
+                   value="{{$item.name }}">
+            </input>
+        </div>
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="event-container" >
+            <text class="title">
+                通用事件
+            </text>
+            <text  class="sub-title">
+                input通用事件1
+            </text>
+            <input class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
+                 ontouchend="touchEnd" ontouchcancel="touchCancel">
+            </input>
+            <text  class="sub-title">
+                input通用事件2
+            </text>
+            <input class ="event2" onclick="click" ondoubleclick="doubleClick"
+                 onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
+                 onswipe="swipe" onattached="attached" ondetached="detached">
+            </input>
+            <text  class="sub-title">
+                input通用事件3
+            </text>
+            <input class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
+                 onpinchend="pinchEnd" onpinchcancel="pinchCancel"
+                 ondragstart="dragStart" ondrag="drag"
+                 ondragend="dragEnd" ondragenter="dragEnter"
+                 ondragover="dragOver" ondragleave="dragLeave"
+                 ondrop="drop">
+            </input>
+            <text  class="sub-title">
+                input特有事件1
+            </text>
+            <input class ="event4"
+                   type = "text"
+                   onchange="change"
+                   onenterkeyclick="enterkeyclick"
+                   enterkeytype="go"
+                   ontranslate="translate"
+                    onshare="share"
+                    onsearch="search"
+                    onoptionselect="optionselect"
+                    onselectchange="selectchange">
+            </input>
+            <text  class="sub-title">
+                input特有事件2
+            </text>
+            <input class ="event5" 
+                    type="checkbox"
+                   onchange="checkChange"
+                   onaccessibility="onAccessibility">
+            </input>
+        </div>
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="function-container">
+            <text class="title">
+                通用方法
+            </text>
+            <text class="sub-title">
+                input通用方法1
+            </text>
+            <input id="function1" class="function1" ontouchstart="functionTest1">
+            </input>
+            <text class="sub-title">
+                input通用方法2
+            </text>
+            <input id="function2" class="function2" ontouchstart="functionTest2">
+            </input>
+            <text class="sub-title">
+                input通用方法3
+            </text>
+            <input id="function3" class="function3" ontouchstart="functionTest3">
+            </input>
+            <text class="sub-title">
+                input特有方法
+            </text>
+            <div>
+                <input id="function4"
+                       class="function4"
+                       type="text"
+                       ontouchstart="functionTest4">
+                </input>
+                <input id="function5"
+                       class="function5"
+                       type="email"
+                       ontouchstart="functionTest5">
+                </input>
+                <input id="function6"
+                       class="function6"
+                       type="date"
+                       ontouchstart="functionTest6">
+                </input>
+            </div>
+        </div>
+    </div>
+
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
 
+    <div class="sub-container">
+        <div class="gradient-container">
+            <text class="title">
+                渐变样式
+            </text>
+            <text class="sub-title">
+                input渐变样式1
+            </text>
+            <input class="gradient1">
+            </input>
+            <text  class="sub-title">
+                input渐变样式2
+            </text>
+            <input class="gradient2">
+            </input>
+            <text  class="sub-title">
+                input渐变样式3
+            </text>
+            <input class="gradient3">
+            </input>
+            <text  class="sub-title">
+                input渐变样式4
+            </text>
+            <input class="gradient4">
+            </input>
+        </div>
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="access-container">
+            <text class="title">
+                无障碍
+            </text>
+            <text class="sub-title">
+                input无障碍1
+            </text>
+            <input class="access1" accessibilitygroup ="true"
+                 accessibilitytext="这是input"
+                 accessibilitydescription="点击此按键会弹出一个对话框"
+                 accessibilityimportance="no-hide-descendants">
+            </input>
+        </div>
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="atom-container">
+            <text class="title">
+                原子布局
+            </text>
+            <text class="sub-title">
+                input原子布局1
+            </text>
+            <div style="flex-direction: row;height: 30px;width: 100%;">
+                <input style="width:20px;height:20px;background-color: blue;display-index: 1;">
+                </input>
+                <input style="width:30px; height:20px;background-color: black;display-index: 5;">
+                </input>
+                <input style="width:40px; height:20px;background-color: yellow;display-index: 4;">
+                </input>
+                <input style="width:10px; height:20px;background-color: red;display-index: 3;">
+                </input>
+                <input style="width:25px; height:20px;background-color:pink;display-index: 7;">
+                </input>
+                <input style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
+                </input>
+            </div>
+            <text class="sub-title">
+                input原子布局2
+            </text>
+            <div style="flex-direction: row;height: 30px;width: 100%;">
+                <input style="height:20px;background-color: blue;flex-weight: 1;">
+                </input>
+                <input style="height:20px;background-color: black;flex-weight: 5;">
+                </input>
+                <input style="height:20px;background-color: yellow;flex-weight: 4;">
+                </input>
+                <input style="height:20px;background-color: red;flex-weight: 3;">
+                </input>
+                <input style="height:20px;background-color:pink;flex-weight: 7;">
+                </input>
+                <input style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
+                </input>
+            </div>
+            <text class="sub-title">
+                input原子布局3
+            </text>
+            <div style="flex-direction: row;height:60px;width: 100%;">
+                <input style="width:30px;background-color: blue;aspect-ratio: 0.6;">
+                </input>
+                <input style="width:30px;background-color: black;aspect-ratio:0.5;">
+                </input>
+                <input style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
+                </input>
+                <input style="width:30px;background-color: red;aspect-ratio: 1.3;">
+                </input>
+                <input style="width:30px;background-color:pink;aspect-ratio: 1;">
+                </input>
+                <input style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
+                </input>
+            </div>
+            <div style="background-color: #000000; width: 100%; height: 2px;">
+            </div>
+            <div class="multiMode-container">
+                <text class="title">
+                    多模输入
+                </text>
+                <text class="sub-title">
+                    input多模输入1
+                </text>
+                <input class="multiMode1" voicelabel = "voice"
+                     subscriptflag="on" subscriptlabel="input" scenelabel="common">
+                </input>
+            </div>
+        </div>
     </div>
-    <input id="function1" class="title" onclick="functionTest1">
-        Element setStyle
-    </input>
-    <input id="function2" class="title" onclick="functionTest2">
-        Element setAttribute
-    </input>
-    <input id="function3" class="title" onclick="functionTest3">
-        Element addChild
-    </input>
-    <input id="function4" class="title" onclick="functionTest4">
-        Element rotation
-    </input>
-    <input id="function5" class="title" onclick="functionTest5">
-        watch test
-    </input>
-    <input id="function6" class="title" onclick="functionTest6">
-        set/delete test
-    </input>
-    <input id="function7" ref="refname" class="title" onclick="functionTest5">
-        watch test
-    </input>
 </div>
diff --git a/arkui/ace_standard/src/main/js/default/pages/input/router/index.js b/arkui/ace_standard/src/main/js/default/pages/input/router/index.js
index 032361ce9a4ada315d04e7b292cb449b30d0134a..1dda543004a6d05d2fac15cf35fbed7c04e07179 100644
--- a/arkui/ace_standard/src/main/js/default/pages/input/router/index.js
+++ b/arkui/ace_standard/src/main/js/default/pages/input/router/index.js
@@ -13,69 +13,511 @@
  * limitations under the License.
  */
 
+import prompt from '@system.prompt';
+
+var options = {
+    duration: 1500,
+    easing: 'friction',
+    delay: 100,
+    fill: 'forwards',
+    iterations: 2,
+    direction: 'normal',
+};
+var frames = [
+    {
+        transform: {
+            translate: '-120px',
+            rotate:'10deg',
+            scale:0.2,
+            skew:'40deg'
+        },
+        opacity: 0.1,
+        offset: 0.0,
+        width: '40%',
+        height:'20px',
+        backgroundColor:'#ff0000',
+        backgroundPosition:'10px 20px',
+        transformOrigin:'left top'
+    },
+    {
+        transform: {
+            translateX: '0px',
+            translateY: '5px',
+            rotateX:'10deg',
+            rotateY:'10deg',
+            scaleX:0.5,
+            scaleY:0.7,
+            skewX:'22deg',
+            skewY:'30deg'
+        },
+        opacity: 0.6,
+        offset: 2.0,
+        width: '60%',
+        height:'30px',
+        backgroundColor:'#ff00ff',
+        backgroundPosition:'15px 25px',
+        transformOrigin:'center top'
+    },
+    {
+        transform: {
+            translateX: '100px',
+            translateY: '0px',
+            translateZ: '20px',
+            rotateX:'0deg',
+            rotateY:'0deg',
+            rotateZ:'30deg',
+            scaleX:1,
+            scaleY:1,
+            scaleZ:2,
+            skewX:'0',
+            skewY:'0',
+            skewZ:'30deg'
+        },
+        opacity: 1,
+        offset: 0.0,
+        width: '100%',
+        height:'30px',
+        backgroundColor:'#ffff00',
+        backgroundPosition:'0px',
+        transformOrigin:'center center'
+    },
+];
+
 export default {
     data: {
-        title: "",
-        watchVal:"123",
-        Version:"1.0"
-    },
-    onInit() {
-        this.$watch("watchVal", "onwatch")
-    },
-    onConfigurationUpdated(configuration) {
-        console.info("the configuration is " + JSON.stringify(configuration));
-        let fontScale = configuration.fontScale;
-        let locate = configuration.locate;
-        let objectLocate = locate.unicodeSetting;
-        console.info("the fontScale " + fontScale);
-        console.info("the locate is  " + JSON.stringify(locate));
-        console.info("the objectLocate is  " + JSON.stringify(objectLocate));
-    },
-    functionTest1() {
-        var function1 = this.$element('function1');
-        var result = function1.setStyle("font-size", "50px")
-        console.info('setStyle result is ' + result)
-    },
-    functionTest2() {
-        var function2 = this.$element('function2');
-        function2.setAttribute("type", "password")
-    },
-    functionTest3() {
-        var elem = dom.createElement("button");
-        elem.setAttribute("value", "buttoncreateElement");
-        var testDiv = this.$element('testDiv');
-        testDiv.addChild(elem);
-    },
-    functionTest4() {
-        var function2 = this.$element('function2');
-        function2.rotation({
-            focus: true
+        array: [
+            {id: 1, name: 'jack', age: 18},
+            {id: 2, name: 'tony', age: 18},
+        ],
+    },
+
+    onShow(){
+        // 通用属性
+        var prop1 =  this.$element('prop1');
+        var name1 = prop1.dataSet.name
+        var prop2 =  this.$refs.prop2;
+        var name2 = prop2.dataSet.name
+        prompt.showToast({
+            message: 'prop1--' + name1 + '\nprop2--' + name2
+        });
+    },
+
+    touchStart(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchstart:\n' + message
+        });
+    },
+
+    touchMove(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchMove:\n' +message
+        });
+    },
+
+    touchEnd(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchEnd:\n' +message
+        });
+    },
+
+    touchCancel(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchCancel:\n' +message
+        });
+    },
+
+    click(){
+        prompt.showToast({
+            message: 'click'
+        });
+    },
+
+    doubleClick(){
+        prompt.showToast({
+            message: 'doubleClick'
+        });
+    },
+
+    longPress(){
+        prompt.showToast({
+            message: 'longPress'
+        });
+    },
+
+    focus(){
+        prompt.showToast({
+            message: 'focus'
+        });
+    },
+
+    blur(){
+        prompt.showToast({
+            message: 'blur'
+        });
+    },
+
+    key(event){
+        var code = event.code;
+        var action = event.action;
+        var repeatCount = event.repeatCount;
+        var timestampStart = event.timestampStart;
+        var message = 'code--' + code + ',action--' + action +
+        ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+        prompt.showToast({
+            message: 'key:\n' + message
+        });
+    },
+
+    swipe(event){
+        var direction = event.direction;
+        var distance = event.distance;
+        var message = 'direction--' + direction + ',distance--' + distance;
+        prompt.showToast({
+            message: 'swipe:\n' + message
+        });
+    },
+
+    attached(){
+        prompt.showToast({
+            message: 'attached'
+        });
+    },
+
+    detached(){
+        prompt.showToast({
+            message: 'detached'
+        });
+    },
+
+    pinchStart(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchStart:\n' + message
+        });
+    },
+
+    pinchUpdate(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchUpdate:\n' + message
+        });
+    },
+
+    pinchEnd(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchUpdate:\n' + message
+        });
+    },
+
+    pinchCancel(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchCancel:\n' + message
+        });
+    },
+
+    dragStart(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragStart:\n' + message
+        });
+    },
+
+    drag(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'drag:\n' + message
+        });
+    },
+
+    dragEnd(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragEnd:\n' + message
+        });
+    },
+
+    dragEnter(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragEnter:\n' + message
+        });
+    },
+
+    dragOver(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragOver:\n' + message
+        });
+    },
+
+    dragLeave(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragLeave:\n' + message
+        });
+    },
+
+    drop(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'drop:\n' + message
+        });
+    },
+
+    functionTest1(event){
+        var function1 =  this.$element('function1');
+        function1.focus(true)
+        var rect = function1.getBoundingClientRect();
+        var width = rect.width;
+        var height = rect.height;
+        var left = rect.left;
+        var top = rect.top;
+        var message = 'width--' + width + ',height--' + height +
+        ',left--' + left + ',top--' + top;
+        prompt.showToast({
+            message: 'function1 rect:\n' + message
+        });
+    },
+
+    functionTest2(event){
+        var function2 =  this.$element('function2');
+        let observer = function2.createIntersectionObserver({
+            ratios: [0.2, 0], // number
+        });
+        observer.observe((isVisible, ratio)=> {
+            console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+            prompt.showToast({
+                message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+            });
         })
+
+        observer.unobserve()
+    },
+
+    functionTest3(event){
+        var function3 =  this.$element('function3');
+
+        var animation = function3.animate(frames, options);
+        animation.play()
+        animation.onfinish = function(){
+            prompt.showToast({
+                message: 'The animation is finished.'
+            });
+        };
+
+        animation.oncancel = function(){
+            prompt.showToast({
+                message: 'The animation is canceled.'
+            });
+        };
+
+        animation.onrepeat = function(){
+            prompt.showToast({
+                message: 'The animation is repeated.'
+            });
+        };
+
+        setTimeout(() => {
+            animation.reverse()
+        }, 500)
+
+        setTimeout(() => {
+            animation.pause()
+        }, 1000)
+
+        setTimeout(() => {
+            animation.cancel()
+        }, 1500)
     },
-    functionTest5() {
-        //将watchVal从123改为456，触发onwatch事件
-        this.watchVal = "456"
+
+    functionTest4(event){
+        var function4 =  this.$element('function4');
+        function4.focus({ focus: false });
     },
-    functionTest6() {
-        this.$set('Version', '2.0');
-        console.info("Version = " + this.Version);
-        this.$delete('Version');
-        // log print:Version = undefined
-        console.info("Version = " + this.Version);
 
-        // add new attr test
-        console.info("this app is = " + this.$app);
-        console.info("this def is = " + this.$app.$def);
+    functionTest5(event){
+        var function4 =  this.$element('function5');
+        function4.showError({ error: "you input error string" });
     },
-    functionTest7() {
-          let input = this.$refs.refname
-          console.info("this refs is = " + this.$refs);
-          console.info("this refs is = " + input);
+
+    functionTest6(event){
+        var function4 =  this.$element('function6');
+        function4.delete();
+    },
+
+    change(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
+
+    enterkeyclick(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
+
+    translate(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
+
+    share(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
     },
-    onwatch(newVal, oldVal) {
-        console.log("watch newVal = " + newVal + ",oldVal =" + oldVal)
-    }
-}
 
+    search(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
 
+    optionselect(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
 
+    selectchange(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
+
+    checkChange(event){
+        prompt.showToast({
+            message: JSON.stringify(event)
+        });
+    },
+
+    onAccessibility(event) {
+        if (event.eventType == 1) {
+            console.log('abc');
+        }
+        console.log("onAccessibility" + JSON.stringify(event));
+    }
+}