optimize test cases

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>

ace/ace_standard/src/main/config.json

@@ -91,7 +91,9 @@
           "pages/stack/index",
           "pages/stepper/index",
           "pages/swiper/index",
-          "pages/tabs/index"
+          "pages/tabs/index",
+          "pages/tab-bar/index",
+          "pages/tab-content/index"
         ],
         "name": "default",
         "window": {

ace/ace_standard/src/main/js/default/pages/div/index.hml

@@ -202,22 +202,22 @@
             <text class="sub-title">
                 div通用方法1
             </text>
-            <div id="function1" class="function1" onattached="functionTest1">
+            <div id="function1" class="function1" ontouchstart="functionTest1">
             </div>
             <text class="sub-title">
                 div通用方法2
             </text>
-            <div id="function2" class="function2" onattached="functionTest2">
+            <div id="function2" class="function2" ontouchstart="functionTest2">
             </div>
             <text class="sub-title">
                 div通用方法3
             </text>
-            <div id="function3" class="function3" onattached="functionTest3">
+            <div id="function3" class="function3" ontouchstart="functionTest3">
             </div>
             <text class="sub-title">
                 div特有方法
             </text>
-            <div id="function4" class="function4" onattached="functionTest4">
+            <div id="function4" class="function4" ontouchstart="functionTest4">
                 <div style="height: 100%; width: 40px; background-color: red; margin-left: 10px;"></div>
                 <div style="height: 100%; width: 40px;background-color: red; margin-left: 10px;"></div>
                 <div style="height: 100%; width: 40px;background-color: red; margin-left: 10px;"></div>

ace/ace_standard/src/main/js/default/pages/listItem/index.css

-/**
- * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* xxx.css */
 .container {
     flex-direction:row;
     width:100%;
@@ -173,7 +157,7 @@
     height: 30px;
     position: absolute;
     left: 5px;
-    top: 5px;
+    top: 50px;
     bottom: 5px;
     right: 10px;
     background-color: pink;

ace/ace_standard/src/main/js/default/pages/listItem/index.hml

-<!--/**
- * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */-->
-
 <div class="container">
     <div class="style-container">
         <text class="title">
@@ -21,54 +6,37 @@
         <text class="sub-title">
             listItem通用样式1
         </text>
-        <list style="height: 150px;">
-            <list-item class="style1" for="{{array}}">
-                <text class="text">{{$item.value}}</text>
-            </list-item>
-        </list>
+        <list-item class="style1" for="{{array}}">
+        </list-item>
         <text  class="sub-title">
             list-item通用样式2
         </text>
-        <list style="height: 80px;">
-            <list-item class="style2" for="{{array}}" style="height: 20px; margin-top: 5px;">
-                <text class="text">{{$item.value}}</text>
-            </list-item>
-        </list>
+        <list-item class="style2" for="{{array}}" style="height: 20px; margin-top: 5px;">
+        </list-item>
         <text class="sub-title">
             list-item通用样式3
         </text>
-        <list style="height: 200px;">
-            <list-item class="style3">
-                <text class="text">通用样式3</text>
-            </list-item>
-        </list>
+        <list-item class="style3">
+        </list-item>
         <text  class="sub-title">
             list-item通用样式4
         </text>
-        <list style="height: 100px;">
-            <list-item class="style4">
-                <text class="text"></text>
-            </list-item>
-        </list>
+        <list-item class="style4">
+        </list-item>
         <text  class="sub-title">
             list-item通用样式5
         </text>
-        <div class="contain1">
-            <list style="height: 100px;">
-                <list-item class="style5">
-                    <text class="text"></text>
-                </list-item>
-                <list-item class="style6">
-                    <text class="text"></text>
-                </list-item>
-            </list>
+        <div class="contain1" style="height: 100px;">
+            <list-item class="style5">
+            </list-item>
+            <list-item class="style6">
+            </list-item>
         </div>
         <text  class="sub-title">
             list-item特有样式
         </text>
         <list class="list">
             <list-item class="list-item1" for="{{array2}}">
-                <text class="text" style="font-size: 16px;">{{$item.value}}</text>
             </list-item>
         </list>
     </div>
@@ -78,79 +46,26 @@
 
     <div class="sub-container">
         <text class="title">
-            通用属性
+            通用&特有属性
         </text>
-        <list class="prop-container">
-            <list-item-group>
-                <list-item id="prop1" class="prop1"
-                           disabled = "true" focusable ="true"
-                           data-name ="prop1" click-effect="spring-medium"
-                           dir ="rtl">
-                    <text class="sub-title">
-                        list-item通用属性1
-                    </text>
-                </list-item>
-                <list-item class="prop2" ref ="prop2"
-                           disabled = "false" focusable ="false"
-                           data-name ="prop2" click-effect="spring-large"
-                           dir ="ltr">
-                    <text  class="sub-title">
-                        list-item通用属性2
-                    </text>
-                </list-item>
-                <list-item style="color: #679855; margin: 5px;" class="prop3">
-                    <text  class="sub-title">
-                        div通用属性3
-                    </text>
-                </list-item>
-                <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
-                           clickeffect="true">
-                    <text  class="sub-title">
-                        list-item特有属性
-                    </text>
-                </list-item>
-                <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
-                           clickeffect="true" primary="true" section="item">
-                    <text  class="sub-title">
-                        list-item特有属性2
-                    </text>
-                </list-item>
-            </list-item-group>
-
-        </list>
         <list class="prop-container">
             <list-item id="prop1" class="prop1"
                        disabled = "true" focusable ="true"
                        data-name ="prop1" click-effect="spring-medium"
                        dir ="rtl">
-                <text class="sub-title">
-                    list-item通用属性1
-                </text>
             </list-item>
             <list-item class="prop2" ref ="prop2"
                        disabled = "false" focusable ="false"
                        data-name ="prop2" click-effect="spring-large"
                        dir ="ltr">
-                <text  class="sub-title">
-                    list-item通用属性2
-                </text>
             </list-item>
             <list-item style="color: #679855; margin: 5px;" class="prop3">
-                <text  class="sub-title">
-                    list-item通用属性3
-                </text>
             </list-item>
             <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
                        clickeffect="true">
-                <text  class="sub-title">
-                    list-item特有属性
-                </text>
             </list-item>
             <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
                        clickeffect="true" sticky="normal">
-                <text  class="sub-title">
-                    list-item特有属性2
-                </text>
             </list-item>
         </list>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -200,11 +115,9 @@
                 list-item动画样式1
             </text>
             <div class="ani1" >
-                <list divider="true">
-                    <list-item for="{{array}}" class="listItem">
-                        <text class="text" style="font-size: 16px;">{{$item.value}}</text>
-                    </list-item>
-                </list>
+                <list-item for="{{array}}" class="listItem">
+                    <text class="text" style="font-size: 16px;">{{$item.value}}</text>
+                </list-item>
             </div>
         </div>
     </div>
@@ -219,24 +132,12 @@
             </text>
             <list style="height: 200px;">
                 <list-item class="gradient1">
-                    <text class="sub-title">
-                        list-item渐变样式1
-                    </text>
                 </list-item>
                 <list-item class="gradient2">
-                    <text class="sub-title">
-                        list-item渐变样式1
-                    </text>
                 </list-item>
                 <list-item class="gradient3">
-                    <text class="sub-title">
-                        list-item渐变样式1
-                    </text>
                 </list-item>
                 <list-item class="gradient4">
-                    <text class="sub-title">
-                        list-item渐变样式1
-                    </text>
                 </list-item>
             </list>
         </div>
@@ -253,7 +154,7 @@
                  accessibilitytext="这是list"
                  accessibilitydescription="点击此按键会弹出一个对话框"
                  accessibilityimportance="no-hide-descendants">
-                <list-item class="style2" for="{{array2}}" style="height: 20px; margin-top: 5px;">
+                <list-item class="style2" for="{{array}}" style="height: 20px; margin-top: 5px;">
                     <text class="text" style="font-size: 16px;">{{$item.value}}</text>
                 </list-item>
             </list>
@@ -274,12 +175,6 @@
                 </list-item>
                 <list-item style="width:40px; height:20px;background-color: yellow;display-index: 4;">
                 </list-item>
-                <list-item style="width:10px; height:20px;background-color: red;display-index: 3;">
-                </list-item>
-                <list-item style="width:25px; height:20px;background-color:pink;display-index: 7;">
-                </list-item>
-                <list-item style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
-                </list-item>
             </list>
             <div style="background-color: #000000; width: 100%; height: 2px;">
             </div>

ace/ace_standard/src/main/js/default/pages/listItemGroup/index.hml

-/**
- * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 <div class="container">
     <div class="style-container">
         <text class="title">
@@ -20,68 +6,33 @@
         <text class="sub-title">
             listItemGroup样式1
         </text>
-        <list style="height: 150px;">
-            <list-item-group>
-                <list-item class="style1" for="{{array}}">
-                    <text class="text">{{$item.value}}</text>
-                </list-item>
-            </list-item-group>
-        </list>
+        <list-item-group class="style1">
+        </list-item-group>
         <text  class="sub-title">
             listItemGroup样式2
         </text>
-        <list style="height: 80px; width: 100%;">
-            <list-item-group>
-                <list-item class="style2" for="{{array}}" style="height: 25px; margin-top: 5px; width: 100%;">
-                    <text class="text">{{$item.value}}</text>
-                </list-item>
-            </list-item-group>
-        </list>
+        <list-item-group class="style2">
+        </list-item-group>
         <text class="sub-title">
             listItemGroup样式3
         </text>
-        <list style="height: 150px;">
-            <list-item-group>
-                <list-item class="style3">
-                    <text class="text">通用样式3</text>
-                </list-item>
-            </list-item-group>
-        </list>
+        <list-item-group class="style3">
+        </list-item-group>
         <text  class="sub-title">
             listItemGroup样式4
         </text>
-        <list style="height: 50px;">
-            <list-item-group>
-                <list-item class="style4">
-                    <text class="text"></text>
-                </list-item>
-            </list-item-group>
-        </list>
+        <list-item-group class="style4">
+        </list-item-group>
         <text  class="sub-title">
             listItemGroup样式5
         </text>
-        <div class="contain1" style="width: 100%;">
-            <list style="height: 100px;">
-                <list-item-group>
-                    <list-item class="style5" style="width: 90%;">
-                        <text class="text"></text>
-                    </list-item>
-                    <list-item class="style6">
-                        <text class="text"></text>
-                    </list-item>
-                </list-item-group>
-            </list>
-        </div>
+        <list-item-group class="style5">
+        </list-item-group>
         <text  class="sub-title">
             listItemGroup样式
         </text>
-        <list class="list">
-            <list-item-group>
-                <list-item class="list-item1" for="{{array2}}">
-                    <text class="text" style="font-size: 16px;">{{$item.value}}</text>
-                </list-item>
-            </list-item-group>
-        </list>
+        <list-item-group class="list-item1">
+        </list-item-group>
     </div>
 
     <div style="background-color: #000000; width: 2px; height: 100%;">
@@ -92,34 +43,22 @@
             通用属性
         </text>
         <list class="prop-container">
+            <list-item-group id="prop1" class="prop1"
+                             disabled = "true" focusable ="true"
+                             data-name ="prop1" click-effect="spring-medium"
+                             dir ="rtl">
+            </list-item-group>
+            <list-item-group class="prop2" ref ="prop2"
+                             disabled = "false" focusable ="false"
+                             data-name ="prop2" click-effect="spring-large"
+                             dir ="ltr">
+            </list-item-group>
+            <list-item-group style="color: #679855; margin: 5px;" class="prop3">
+            </list-item-group>
+            <list-item-group style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
+                             clickeffect="true">
+            </list-item-group>
             <list-item-group>
-                <list-item id="prop1" class="prop1"
-                           disabled = "true" focusable ="true"
-                           data-name ="prop1" click-effect="spring-medium"
-                           dir ="rtl">
-                    <text class="sub-title">
-                        listGroup属性1
-                    </text>
-                </list-item>
-                <list-item class="prop2" ref ="prop2"
-                           disabled = "false" focusable ="false"
-                           data-name ="prop2" click-effect="spring-large"
-                           dir ="ltr">
-                    <text  class="sub-title">
-                        listGroup属性2
-                    </text>
-                </list-item>
-                <list-item style="color: #679855; margin: 5px;" class="prop3">
-                    <text  class="sub-title">
-                        listGroup属性3
-                    </text>
-                </list-item>
-                <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
-                           clickeffect="true">
-                    <text  class="sub-title">
-                        listGroup属性
-                    </text>
-                </list-item>
                 <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
                            clickeffect="true" primary="true" section="item">
                     <text  class="sub-title">
@@ -127,44 +66,6 @@
                     </text>
                 </list-item>
             </list-item-group>
-
-        </list>
-        <list class="prop-container">
-            <list-item-group>
-                <list-item id="prop1" class="prop1"
-                    disabled = "false" focusable ="true"
-                    data-name ="prop1" click-effect="spring-medium"
-                    dir ="rtl">
-                    <text class="sub-title">
-                        listGroup属性1
-                    </text>
-                </list-item>
-                <list-item class="prop2" ref ="prop2"
-                           disabled = "false" focusable ="false"
-                           data-name ="prop2" click-effect="spring-large"
-                           dir ="ltr">
-                    <text  class="sub-title">
-                        listGroup属性2
-                    </text>
-                </list-item>
-                <list-item style="color: #679855; margin: 5px;" class="prop3" primary="true" section="item">
-                    <text  class="sub-title">
-                        listGroup属性3
-                    </text>
-                </list-item>
-                <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
-                           clickeffect="true">
-                    <text  class="sub-title">
-                        listGroup特有属性
-                    </text>
-                </list-item>
-                <list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
-                           clickeffect="true" sticky="normal">
-                    <text  class="sub-title">
-                        listGroup特有属性
-                    </text>
-                </list-item>
-            </list-item-group>
         </list>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
@@ -173,33 +74,24 @@
                 通用特有事件
             </text>
             <list style="width: 100%;">
-                <list-item-group style="width: 100%;" id="groupId" @groupclick="groupClick"
+                <list-item-group class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
+                                 ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 40px;">
+                </list-item-group>
+                <list-item-group class ="event2" onclick="click" ondoubleclick="doubleClick"
+                                 onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
+                                 onswipe="swipe" onattached="attached" ondetached="detached" style="height: 40px;">
+                </list-item-group>
+                <list-item-group class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
+                                 onpinchend="pinchEnd" onpinchcancel="pinchCancel"
+                                 ondragstart="dragStart" ondrag="drag"
+                                 ondragend="dragEnd" ondragenter="dragEnter"
+                                 ondragover="dragOver" ondragleave="dragLeave"
+                                 ondrop="drop" style="height: 40px;">
+                </list-item-group>
+                <list-item-group style="width: 100%; height: 40px; background-color: deeppink;" id="groupId" @groupclick="groupClick"
                     @groupcollapse="groupCollapse" @groupexpand="groupExpand">
-                    <list-item class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
-                        ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 40px;">
-                        <text  class="sub-title" >
-                            listItemGroup通用事件1
-                        </text>
-                    </list-item>
-                    <list-item class ="event2" onclick="click" ondoubleclick="doubleClick"
-                        onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
-                        onswipe="swipe" onattached="attached" ondetached="detached" style="height: 40px;">
-                        <text  class="sub-title" >
-                            listItemGroup通用事件2
-                        </text>
-                    </list-item>
-                    <list-item class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
-                        onpinchend="pinchEnd" onpinchcancel="pinchCancel"
-                        ondragstart="dragStart" ondrag="drag"
-                        ondragend="dragEnd" ondragenter="dragEnter"
-                        ondragover="dragOver" ondragleave="dragLeave"
-                        ondrop="drop" style="height: 40px;">
-                        <text  class="sub-title" >
-                            listItemGroup通用事件3
-                        </text>
-                    </list-item>
+                    <list-item style="height: 40px; width: 100%;"></list-item>
                 </list-item-group>
-
             </list>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -212,13 +104,8 @@
                 listItemGroup动画1
             </text>
             <div class="ani1" >
-                <list divider="true">
-                    <list-item-group>
-                        <list-item for="{{array}}" class="listItem">
-                            <text class="text" style="font-size: 16px;">{{$item.value}}</text>
-                        </list-item>
-                    </list-item-group>
-                </list>
+                <list-item-group>
+                </list-item-group>
             </div>
         </div>
     </div>
@@ -232,27 +119,13 @@
                 渐变样式
             </text>
             <list style="height: 200px;">
-                <list-item-group>
-                    <list-item class="gradient1">
-                        <text class="sub-title">
-                            listGroup渐变1
-                        </text>
-                    </list-item>
-                    <list-item class="gradient2">
-                        <text class="sub-title">
-                            listGroup渐变2
-                        </text>
-                    </list-item>
-                    <list-item class="gradient3">
-                        <text class="sub-title">
-                            listGroup渐变3
-                        </text>
-                    </list-item>
-                    <list-item class="gradient4">
-                        <text class="sub-title">
-                            listGroup渐变4
-                        </text>
-                    </list-item>
+                <list-item-group class="gradient1">
+                </list-item-group>
+                <list-item-group class="gradient2">
+                </list-item-group>
+                <list-item-group class="gradient3">
+                </list-item-group>
+                <list-item-group class="gradient4">
                 </list-item-group>
             </list>
         </div>
@@ -265,16 +138,12 @@
             <text class="sub-title" style="height: 30px;">
                 listGroup无障碍1
             </text>
-            <list class="access1" accessibilitygroup ="true" style="height: 100%; width: 100%;"
-                  accessibilitytext="这是list"
-                  accessibilitydescription="点击此按键会弹出一个对话框"
-                  accessibilityimportance="no-hide-descendants">
-                <list-item-group>
-                    <list-item class="style2" for="{{array2}}" style="height: 20px; margin-top: 5px; width: 100%;">
-                        <text class="text" style="font-size: 16px;">{{$item.value}}</text>
-                    </list-item>
-                </list-item-group>
-            </list>
+            <list-item-group class="access1"style="height: 100%; width: 100%; background-color: deeppink;"
+                             accessibilitygroup ="true"
+                             accessibilitytext="这是listItemGroup"
+                             accessibilitydescription="点击此按键会弹出一个对话框"
+                             accessibilityimportance="no-hide-descendants">
+            </list-item-group>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
@@ -286,19 +155,11 @@
                 listGroup原子布局1
             </text>
             <list style="flex-direction: row;height: 30px;width: 100%;">
-                <list-item-group>
-                    <list-item style="width:20px;height:20px;background-color: blue;display-index: 1;">
-                    </list-item>
-                    <list-item style="width:30px; height:20px;background-color: black;display-index: 5;">
-                    </list-item>
-                    <list-item style="width:40px; height:20px;background-color: yellow;display-index: 4;">
-                    </list-item>
-                    <list-item style="width:10px; height:20px;background-color: red;display-index: 3;">
-                    </list-item>
-                    <list-item style="width:25px; height:20px;background-color:pink;display-index: 7;">
-                    </list-item>
-                    <list-item style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
-                    </list-item>
+                <list-item-group style="width:20px;height:20px;background-color: blue;display-index: 1;">
+                </list-item-group>
+                <list-item-group style="width:30px; height:20px;background-color: black;display-index: 5;">
+                </list-item-group>
+                <list-item-group style="width:40px; height:20px;background-color: yellow;display-index: 4;">
                 </list-item-group>
             </list>
             <div style="background-color: #000000; width: 100%; height: 2px;">

ace/ace_standard/src/main/js/default/pages/marquee/index.css

@@ -335,7 +335,6 @@
 
 .prop5 {
     color: #831834;
-    stroke-width: 40px;
     line-cap: square;
     margin: 5px;
     height: 70px;
@@ -349,7 +348,6 @@
 
 .ani1{
     color: #72ac33;
-    stroke-width: 55px;
     line-cap: square;
     margin: 5px;
     transform-origin: 0% 0%;
@@ -423,11 +421,11 @@
     background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
 }
 
-.access-container{
+.accessibility-container{
     flex-direction: column;
 }
 
-.access1{
+.accessibility1{
     background-color: #321124;
     margin: 5px;
     width: 90%;

ace/ace_standard/src/main/js/default/pages/marquee/index.hml

@@ -20,52 +20,43 @@
                 通用样式
             </text>
             <text class="sub-title">
-                marque通用样式1
+                通用样式1
             </text>
             <marquee class="style1">
-                文字1
             </marquee>
             <text  class="sub-title">
-                marque通用样式2
+               通用样式2
             </text>
             <marquee class="style2">
-                文字2
             </marquee>
             <text class="sub-title">
-                marque通用样式3
+                通用样式3
             </text>
             <marquee class="style3">
-                文字3
             </marquee>
             <text  class="sub-title">
-                marque通用样式4
+                通用样式4
             </text>
             <marquee class="style4">
-                文字4
             </marquee>
             <text  class="sub-title">
-                marque通用样式5
+                通用样式5
             </text>
             <div class="contain1">
                 <marquee class="style5">
-                    文字5
                 </marquee>
                 <marquee class="style6">
-                    文字6
                 </marquee>
             </div>
             <text  class="sub-title">
-                marque特有样式
+                特有样式
             </text>
             <div class="style7">
                 <marquee class="flex-item color-primary">
-                    样式
                 </marquee>
                 <marquee class="flex-item color-warning">
-                    样式
                 </marquee>
                 <marquee class="flex-item color-success">
-                    样式
                 </marquee>
             </div>
         </div>
@@ -76,16 +67,14 @@
                 动画样式
             </text>
             <text class="sub-title">
-                div动画样式1
+                动画样式1
             </text>
             <marquee class="ani1" >
-                动画1
             </marquee>
             <text class="sub-title">
-                div动画样式2
+                动画样式2
             </text>
             <marquee class="ani2" >
-                动画2
             </marquee>
         </div>
     </div>
@@ -99,35 +88,32 @@
                 通用属性
             </text>
             <text class="sub-title">
-                mar通用属性1
+                通用属性1
             </text>
             <marquee id="prop1" class="prop1"
                  disabled = "true" focusable ="true"
                  data-name ="prop1" click-effect="spring-medium"
                  dir ="rtl">
-                属性1----
             </marquee>
             <text  class="sub-title">
-                mar通用属性2
+                通用属性2
             </text>
             <marquee class="prop2" ref ="prop2"
                  disabled = "false" focusable ="false"
                  data-name ="prop2" click-effect="spring-large"
                  dir ="ltr">
-                属性2----
             </marquee>
             <text  class="sub-title">
-                mar通用属性3
+                通用属性3
             </text>
             <marquee style="color: #679855; margin: 2px;" class="prop3">
-                属性3----
             </marquee>
             <text  class="sub-title">
-                marque特有属性
+                特有属性
             </text>
             <marquee style="color: #679855; margin: 5px;" class="prop3"
                      crollamount="10" loop="-1" direction="right">
-                属性4----
+                特有属性
             </marquee>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -137,22 +123,20 @@
                 通用事件
             </text>
             <text  class="sub-title">
-                mar通用事件1
+                通用事件1
             </text>
             <marquee class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
                  ontouchend="touchEnd" ontouchcancel="touchCancel">
-                事件1----
             </marquee>
             <text  class="sub-title">
-                mar通用事件2
+                通用事件2
             </text>
             <marquee class ="event2" onclick="click" ondoubleclick="doubleClick"
                  onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
                  onswipe="swipe" onattached="attached" ondetached="detached">
-                事件2----
             </marquee>
             <text  class="sub-title">
-                mar通用事件3
+                通用事件3
             </text>
             <marquee class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
                  onpinchend="pinchEnd" onpinchcancel="pinchCancel"
@@ -160,10 +144,9 @@
                  ondragend="dragEnd" ondragenter="dragEnter"
                  ondragover="dragOver" ondragleave="dragLeave"
                  ondrop="drop">
-                事件3----
             </marquee>
             <text  class="sub-title">
-                mar特有事件1
+                特有事件1
             </text>
             <div class ="event4" onreachstart="reachStart" onreachend="reachEnd">
                 <marquee id="customMarquee" loop="4" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish" style="height: 100%; width: 100%; background-color: red; margin-left: 10px;">
@@ -177,25 +160,22 @@
                 通用方法
             </text>
             <text class="sub-title">
-                marque通用方法1
+                通用方法1
             </text>
             <marquee id="function1" class="function1" ontouchstart="functionTest1">
-                方法1----
             </marquee>
             <text class="sub-title">
-                marque通用方法2
+                通用方法2
             </text>
             <marquee id="function2" class="function2" ontouchstart="functionTest2">
-                方法2----
             </marquee>
             <text class="sub-title">
-                marque通用方法3
+                通用方法3
             </text>
             <marquee id="function3" class="function3" ontouchstart="functionTest3">
-                方法3----
             </marquee>
             <text class="sub-title">
-                marque特有方法
+                特有方法
             </text>
             <div class="flex-class">
                 <button onclick="onStartClick">
@@ -218,36 +198,36 @@
                 渐变样式
             </text>
             <text class="sub-title">
-                marque渐变样式1
+                渐变样式1
             </text>
             <marquee class="gradient1">
             </marquee>
             <text  class="sub-title">
-                marque渐变样式2
+                渐变样式2
             </text>
             <marquee class="gradient2">
             </marquee>
             <text  class="sub-title">
-                marque渐变样式3
+                渐变样式3
             </text>
             <marquee class="gradient3">
             </marquee>
             <text  class="sub-title">
-                marque渐变样式4
+                渐变样式4
             </text>
             <marquee class="gradient4">
             </marquee>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
-        <div class="access-container">
+        <div class="accessibility-container">
             <text class="title">
                 无障碍
             </text>
             <text class="sub-title">
-                marque无障碍1
+                无障碍1
             </text>
-            <marquee class="access1" accessibilitygroup ="true"
+            <marquee class="accessibility1" accessibilitygroup ="true"
                  accessibilitytext="这是div"
                  accessibilitydescription="点击此按键会弹出一个对话框"
                  accessibilityimportance="no-hide-descendants">
@@ -260,7 +240,7 @@
                 原子布局
             </text>
             <text class="sub-title">
-                marque原子布局1
+                原子布局1
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
                 <marquee style="width:20px;height:20px;background-color: blue;display-index: 1;">
@@ -277,7 +257,7 @@
                 </marquee>
             </div>
             <text class="sub-title">
-                marque原子布局2
+                原子布局2
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
                 <marquee style="height:20px;background-color: blue;flex-weight: 1;">
@@ -294,7 +274,7 @@
                 </marquee>
             </div>
             <text class="sub-title">
-                marque原子布局3
+                原子布局3
             </text>
             <div style="flex-direction: row;height:60px;width: 100%;">
                 <marquee style="width:30px;background-color: blue;aspect-ratio: 0.6;">
@@ -317,7 +297,7 @@
                     多模输入
                 </text>
                 <text class="sub-title">
-                    marque多模输入1
+                    多模输入1
                 </text>
                 <marquee class="multiMode1" voicelabel = "voice"
                      subscriptflag="on" subscriptlabel="div" scenelabel="common">

ace/ace_standard/src/main/js/default/pages/marquee/index.js

-/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * 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 {
 
     onShow(){
@@ -444,6 +361,74 @@ export default {
 
     functionTest3(event){
         var function3 =  this.$element('function3');
+        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'
+            },
+        ];
+
         var animation = function3.animate(frames, options);
         animation.play()
         animation.onfinish = function(){

ace/ace_standard/src/main/js/default/pages/panel/index.css

@@ -50,10 +50,6 @@
     flex-direction: column;
 }
 
-.multimode-container{
-    flex-direction: column;
-}
-
 .title{
     width: 100%;
     font-size: 18px;
@@ -167,7 +163,6 @@
     mask-image: url('common/images/icon.png');
     mask-size: cover;
     mask-position: center;
-
 }
 
 .style3{
@@ -188,48 +183,6 @@
     flex-shrink: 1;
 }
 
-.style4{
-    width: 60%;
-    height: 5%;
-    padding: 10px;
-    margin: 5px;
-    border: 2px solid #000000;
-}
-
-
-
-.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 {
-    margin-bottom: 10px;
-    margin-top: 10px;
-    color: green;
-    stroke-width: 30px;
-    line-cap: round;
-}
-
-
 .event1{
     width: 60%;
     flex-weight: 1;
@@ -264,12 +217,13 @@
 
 
 
-#prop1 {
+.prop1 {
     color: #ad4e2a;
     height: 30px;
     background-color: mediumslateblue;
     width: 100%;
     margin: 5px;
+
 }
 
 .prop2 {
@@ -381,16 +335,6 @@
     margin: 5px;
 }
 
-
-
-.multimode1{
-    color: #978666;
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
-}
-
-
 .function1{
     background-color: #ff0000;
     width: 60%;

ace/ace_standard/src/main/js/default/pages/panel/index.js

@@ -89,52 +89,52 @@ export default {
     },
     // 样式
     showPanel1() {
-        this.$element('simplepanel1').show()
+        this.$element('simplePanel1').show()
     },
     closePanel1() {
-        this.$element('simplepanel1').close()
+        this.$element('simplePanel1').close()
     },
     showPanel2() {
-        this.$element('simplepanel2').show()
+        this.$element('simplePanel2').show()
     },
     closePanel2() {
-        this.$element('simplepanel2').close()
+        this.$element('simplePanel2').close()
     },
     showPanel3() {
-        this.$element('simplepanel3').show()
+        this.$element('simplePanel3').show()
     },
     closePanel3() {
-        this.$element('simplepanel3').close()
+        this.$element('simplePanel3').close()
     },
     showPanel4() {
-        this.$element('simplepanel4').show()
+        this.$element('simplePanel4').show()
     },
     closePanel4() {
-        this.$element('simplepanel4').close()
+        this.$element('simplePanel4').close()
     },
     showPanel5() {
-        this.$element('simplepanel5').show()
+        this.$element('simplePanel5').show()
     },
     closePanel5() {
-        this.$element('simplepanel5').close()
+        this.$element('simplePanel5').close()
     },
     showPanel6() {
-        this.$element('simplepanel6').show()
+        this.$element('simplePanel6').show()
     },
     closePanel6() {
-        this.$element('simplepanel6').close()
+        this.$element('simplePanel6').close()
     },
     showPanel7() {
-        this.$element('simplepanel7').show()
+        this.$element('simplePanel7').show()
     },
     closePanel7() {
-        this.$element('simplepanel7').close()
+        this.$element('simplePanel7').close()
     },
     showPanel() {
-        this.$element('simplepanel').show()
+        this.$element('simplePanel').show()
     },
     closePanel() {
-        this.$element('simplepanel').close()
+        this.$element('simplePanel').close()
     },
     // 属性
     showPanelPro1() {
@@ -150,28 +150,28 @@ export default {
         this.$element('prop2').close()
     },
     showPanelPro3() {
-        this.$element('simplepanelPro3').show()
+        this.$element('simplePanelPro3').show()
     },
     closePanelPro3() {
-        this.$element('simplepanelPro3').close()
+        this.$element('simplePanelPro3').close()
     },
     showPanelPro4() {
-        this.$element('simplepanelPro4').show()
+        this.$element('simplePanelPro4').show()
     },
     closePanelPro4() {
-        this.$element('simplepanelPro4').close()
+        this.$element('simplePanelPro4').close()
     },
     showPanelPro5() {
-        this.$element('simplepanelPro5').show()
+        this.$element('simplePanelPro5').show()
     },
     closePanelPro5() {
-        this.$element('simplepanelPro5').close()
+        this.$element('simplePanelPro5').close()
     },
     showPanelPro6() {
-        this.$element('simplepanelPro6').show()
+        this.$element('simplePanelPro6').show()
     },
     closePanelPro6() {
-        this.$element('simplepanelPro6').close()
+        this.$element('simplePanelPro6').close()
     },
     //事件
     showOne() {
@@ -200,55 +200,55 @@ export default {
     },
     // 渐变
     showPanelA() {
-        this.$element('simplepanelA1').show()
+        this.$element('simplePanelA1').show()
     },
     closePanelA() {
-        this.$element('simplepanelA1').close()
+        this.$element('simplePanelA1').close()
     },
     showPanelB() {
-        this.$element('simplepanelB1').show()
+        this.$element('simplePanelB1').show()
     },
     closePanelB() {
-        this.$element('simplepanelB1').close()
+        this.$element('simplePanelB1').close()
     },
     showPanelC() {
-        this.$element('simplepanelC1').show()
+        this.$element('simplePanelC1').show()
     },
     closePanelC() {
-        this.$element('simplepanelC1').close()
+        this.$element('simplePanelC1').close()
     },
     showPanelD() {
-        this.$element('simplepanelD1').show()
+        this.$element('simplePanelD1').show()
     },
     closePanelD() {
-        this.$element('simplepanelD1').close()
+        this.$element('simplePanelD1').close()
     },
     // 动画
     showPanelAni1() {
-        this.$element('simplepanelAni1').show()
+        this.$element('simplePanelAni1').show()
     },
     closePanelAni1() {
-        this.$element('simplepanelAni1').close()
+        this.$element('simplePanelAni1').close()
     },
     showPanelAni2() {
-        this.$element('simplepanelAni2').show()
+        this.$element('simplePanelAni2').show()
     },
     closePanelAni2() {
-        this.$element('simplepanelAni2').close()
+        this.$element('simplePanelAni2').close()
     },
     // 无障碍
     showPanelNo() {
-        this.$element('simplepanelNo').show()
+        this.$element('simplePanelNo').show()
     },
     closePanelNo() {
-        this.$element('simplepanelNo').close()
+        this.$element('simplePanelNo').close()
     },
     // 多模输入
     showPanelMore() {
-        this.$element('simplepanelMore').show()
+        this.$element('simplePanelMore').show()
     },
     closePanelMore() {
-        this.$element('simplepanelMore').close()
+        this.$element('simplePanelMore').close()
     },
     changeMode(e) {
         this.modeFlag = e.mode

ace/ace_standard/src/main/js/default/pages/popup/index.css

@@ -336,18 +336,16 @@
 }
 
 .access1{
-    color: #321124;
-    stroke-width: 30px;
-    line-cap: square;
+    background-color: #321124;
     margin: 5px;
+    width: 90%;
+    height: 30px;
 }
 
-
-
 .multimode1{
-    color: #978666;
-    stroke-width: 30px;
-    line-cap: square;
+    background-color: #978666;
+    width: 100%;
+    height: 30px;
     margin: 5px;
 }
 

ace/ace_standard/src/main/js/default/pages/popup/index.hml

 
 <div class="container">
     <popup id="popup1"
-           class="popup1 style1"
+           class="style1"
            target="text1"
            placement="top"
            style="mask-color:blue;"
@@ -14,7 +14,7 @@
     </popup>
 
     <popup id="popup2"
-           class="popup2 style2"
+           class="style2"
            target="text2"
            placement="left"
            keepalive="true"
@@ -26,7 +26,7 @@
     </popup>
 
     <popup id="popup3"
-           class="popup3 style3"
+           class="style3"
            target="text3"
            placement="top"
            keepalive="true"
@@ -38,7 +38,7 @@
     </popup>
 
     <popup id="popup4"
-           class="popup4 style4"
+           class="style4"
            target="text4"
            placement="top"
            keepalive="true"
@@ -50,7 +50,7 @@
     </popup>
 
     <popup id="popup5"
-           class="popup5 style5"
+           class="style5"
            target="text5"
            placement="top"
            keepalive="true"
@@ -62,7 +62,7 @@
     </popup>
 
     <popup id="popup6"
-           class="popup6 style6"
+           class="style6"
            target="text6"
            placement="top"
            keepalive="true"
@@ -74,7 +74,7 @@
     </popup>
 
     <popup id="popup7"
-           class="popup7 style7"
+           class="style7"
            target="text7"
            placement="top"
            keepalive="true"
@@ -86,7 +86,6 @@
     </popup>
 
     <popup id="prop1"
-           class="pro"
            target="textPro1"
            disabled = "true"
            data-name ="prop1"
@@ -110,7 +109,6 @@
     </popup>
 
     <popup id="prop3"
-           class="prop3"
            style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;"
            target="textPro3"
            placement="top"
@@ -147,7 +145,6 @@
     </popup>
 
     <popup id="prop6"
-           class="pro6"
            target="textPro6"
            placement="top"
            keepalive="true"
@@ -158,7 +155,6 @@
     </popup>
 
     <popup id="prop7"
-           class="pro7"
            target="textPro7"
            placement="bottom"
            keepalive="true"
@@ -170,7 +166,6 @@
     </popup>
 
     <popup id="prop8"
-           class="pro8"
            target="textPro8"
            placement="topLeft"
            keepalive="false"
@@ -182,7 +177,6 @@
     </popup>
 
     <popup id="prop9"
-           class="pro9"
            target="textPro9"
            placement="topRight"
            keepalive="false"
@@ -194,7 +188,6 @@
     </popup>
 
     <popup id="prop10"
-           class="pro10"
            target="textPro10"
            placement="bottomLeft"
            keepalive="false"
@@ -206,7 +199,6 @@
     </popup>
 
     <popup id="prop11"
-           class="pro11"
            target="textPro11"
            placement="bottomRight"
            keepalive="false"
@@ -428,44 +420,44 @@
     </popup>
 
     <div class="sub-container">
-        <!-- 通用样式 -->
+    <!-- 通用样式 -->
         <div class="style-container">
-        <text class="title">
-            通用样式
-        </text>
-
-        <text id="text1" class="sub-title">
-            popup通用样式1
-        </text>
+            <text class="title">
+                通用样式
+            </text>
 
-        <text id="text2" class="sub-title">
-            popup通用样式2
-        </text>
+            <text id="text1" class="sub-title">
+                popup通用样式1
+            </text>
 
-        <text id="text3" class="sub-title">
-            popup通用样式3
-        </text>
+            <text id="text2" class="sub-title">
+                popup通用样式2
+            </text>
 
-        <text id="text4" class="sub-title">
-            popup通用样式4
-        </text>
+            <text id="text3" class="sub-title">
+                popup通用样式3
+            </text>
 
-        <div class="contain1">
             <text id="text4" class="sub-title">
-                popup通用样式5
+                popup通用样式4
             </text>
-            <text id="text4" class="sub-title">
-                popup通用样式6
+
+            <div class="contain1">
+                <text id="text4" class="sub-title">
+                    popup通用样式5
+                </text>
+                <text id="text4" class="sub-title">
+                    popup通用样式6
+                </text>
+            </div>
+
+            <text id="text7" class="sub-title">
+                popup特有样式
             </text>
         </div>
-
-        <text id="text7" class="sub-title">
-            popup特有样式
-        </text>
-    </div>
         <divider style="color: #000000; stroke-width: 2px;" vertical="false">
         </divider>
-        <!-- 动画样式 -->
+    <!-- 动画样式 -->
         <div class="ani-container">
 
             <text class="title">
@@ -484,7 +476,7 @@
     <div style="background-color: #000000; width: 2px; height: 100%;">
     </div>
     <div class="sub-container">
-        <!-- 通用属性 -->
+    <!-- 通用属性 -->
         <div class="prop-container">
             <text class="title">
                 通用属性
@@ -536,7 +528,7 @@
         </div>
         <divider style="color: #000000; stroke-width: 2px;" vertical="false">
         </divider>
-        <!-- 通用事件 -->
+    <!-- 通用事件 -->
         <div class="event-container" >
             <text class="title">
                 通用事件
@@ -544,7 +536,7 @@
             <text id="eventOne" class="sub-title">
                 popup通用事件1
             </text>
-            
+
             <text id="eventTwo" class="sub-title">
                 popup通用事件2
             </text>
@@ -575,7 +567,7 @@
                 popup特有方法
             </text>
         </div>
-        <!-- 通用方法 -->
+    <!-- 通用方法 -->
     </div>
     <div style="background-color: #000000; width: 2px; height: 100%;">
     </div>
@@ -599,7 +591,6 @@
             <text id="gradient4" class="sub-title">
                 popup渐变样式4
             </text>
-
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
@@ -607,10 +598,9 @@
             <text class="title">
                 无障碍
             </text>
-            <text id="access1" id="access1" class="sub-title">
+            <text id="access1" class="sub-title">
                 popup无障碍1
             </text>
-
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
@@ -618,10 +608,9 @@
             <text class="title">
                 多模输入
             </text>
-            <text id="mul" class="sub-title multimode1">
+            <text id="mul" class="sub-title">
                 popup多模输入1
             </text>
         </div>
     </div>
 </div>
-

ace/ace_standard/src/main/js/default/pages/refresh/index.css

@@ -225,6 +225,7 @@ refresh{
 }
 
 .style5{
+    background: linear-gradient(pink,#fff000);
     width: 50%;
     margin-bottom: 5px;
     height: 40%;
@@ -246,7 +247,8 @@ refresh{
     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;
+    background: linear-gradient(pink,#fff000);
+    border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
 }
 
 .style7 {
@@ -259,6 +261,7 @@ refresh{
     line-cap: round;
     height: 12%;
     background-color:darkorchid;
+    background: linear-gradient(gray,#fff000);
     progress-color:skyblue;
 }
 

ace/ace_standard/src/main/js/default/pages/refresh/index.hml

@@ -28,13 +28,6 @@
                  offset="10px"
                  refreshing="{{fresh}}"
                  onrefresh="refresh">
-            <list class="list" scrolleffect="no">
-                <list-item class="listitem" for="list">
-                    <div class="content">
-                        <text class="text">{{$item}}</text>
-                    </div>
-                </list-item>
-            </list>
         </refresh>
 
         <text  class="sub-title">
@@ -44,13 +37,6 @@
                  offset="10px"
                  refreshing="{{fresh}}"
                  onrefresh="refresh">
-            <list class="list" scrolleffect="no">
-                <list-item class="listitem" for="list">
-                    <div class="content">
-                        <text class="text">{{$item}}</text>
-                    </div>
-                </list-item>
-            </list>
         </refresh>
 
         <text  class="sub-title">
@@ -60,13 +46,6 @@
                  offset="10px"
                  refreshing="{{fresh}}"
                  onrefresh="refresh">
-            <list class="list" scrolleffect="no">
-                <list-item class="listitem" for="list">
-                    <div class="content">
-                        <text class="text3 text">{{$item}}</text>
-                    </div>
-                </list-item>
-            </list>
         </refresh>
 
         <text  class="sub-title">
@@ -76,13 +55,6 @@
                  offset="10px"
                  refreshing="{{fresh}}"
                  onrefresh="refresh">
-            <list class="list" scrolleffect="no">
-                <list-item class="listitem" for="list">
-                    <div class="content">
-                        <text class="text">{{$item}}</text>
-                    </div>
-                </list-item>
-            </list>
         </refresh>
 
         <text  class="sub-title">
@@ -93,25 +65,11 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
             <refresh class="style6"
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
         </div>
         <text  class="sub-title">
@@ -121,13 +79,6 @@
                  offset="10px"
                  refreshing="{{fresh}}"
                  onrefresh="refresh">
-            <list class="list" scrolleffect="no">
-                <list-item class="listitem" for="list">
-                    <div class="content">
-                        <text class="text">{{$item}}</text>
-                    </div>
-                </list-item>
-            </list>
         </refresh>
     </div>
         <divider style="color: #000000; stroke-width: 2px;" vertical="false">
@@ -144,13 +95,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text class="sub-title">
@@ -160,13 +104,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
         </div>
@@ -192,13 +129,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -214,13 +144,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -231,13 +154,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -248,16 +164,9 @@
                      type="auto"
                      lasttime="true"
                      friction="42"
-                     timeoffset="10"
+                     timeoffset="2px"
                      refreshing="true"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -271,13 +180,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -298,13 +200,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -318,13 +213,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -338,13 +226,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -358,13 +239,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -378,6 +252,7 @@
                 refresh通用方法1
             </text>
             <refresh class="style7 function1"
+                     id="function1"
                      offset="10px"
                      lasttime="false"
                      friction="52"
@@ -385,13 +260,6 @@
                      timeoffset="5px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
         </div>
     </div>
@@ -412,13 +280,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -428,13 +289,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -444,13 +298,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
             <text  class="sub-title">
@@ -460,13 +307,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
 
         </div>
@@ -488,13 +328,6 @@
                      offset="10px"
                      refreshing="{{fresh}}"
                      onrefresh="refresh">
-                <list class="list" scrolleffect="no">
-                    <list-item class="listitem" for="list">
-                        <div class="content">
-                            <text class="text">{{$item}}</text>
-                        </div>
-                    </list-item>
-                </list>
             </refresh>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -512,37 +345,16 @@
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
             </div>
             <text class="sub-title">
@@ -553,37 +365,16 @@
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
             </div>
             <text class="sub-title">
@@ -594,37 +385,16 @@
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
                 <refresh class="atstyle"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
             </div>
             <div style="background-color: #000000; width: 100%; height: 2px;">
@@ -637,16 +407,13 @@
                     refresh多模输入1
                 </text>
                 <refresh class="mstyle multimode1"
+                         voicelabel = "voice"
+                         subscriptflag="on"
+                         subscriptlabel="div"
+                         scenelabel="common"
                          offset="10px"
                          refreshing="{{fresh}}"
                          onrefresh="refresh">
-                    <list class="list" scrolleffect="no">
-                        <list-item class="listitem" for="list">
-                            <div class="content">
-                                <text class="text">{{$item}}</text>
-                            </div>
-                        </list-item>
-                    </list>
                 </refresh>
             </div>
         </div>

ace/ace_standard/src/main/js/default/pages/refresh/index.js

-/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * 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: {
         list:[],
@@ -437,6 +354,74 @@ export default {
 
     functionTest3(event){
         var function3 =  this.$element('function3');
+        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'
+            },
+        ];
+
         var animation = function3.animate(frames, options);
         animation.play()
         animation.onfinish = function(){

ace/ace_standard/src/main/js/default/pages/stack/index.css

+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-.back-child {
-    width: 100%;
-    height: 100%;
-    background-color: #3f56ea;
-}
-.front-child {
-    width: 50%;
-    height: 50%;
-    background-color: #00bfc9;
-}
-.positioned-child {
-    width: 50%;
-    height: 50%;
-    left: 30%;
-    top: 20%;
-    background-color: #47cc47;
-}
-.bd-radius {
-    border-radius: 16px;
-}
-
-/* xxx.css */
 .container {
-    flex-direction:row;
-    width:100%;
-    height:100%;
-    padding: 1px;
+  flex-direction:row;
+  width:100%;
+  height:100%;
+  padding: 1px;
 }
 
 .sub-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1;
+  flex-direction: column;
+  height: 100%;
+  flex-weight: 1;
 }
 
 .style-container{
-    flex-direction: column;
-    height: 70%;
-}
-.contain1{
-    width: 100%;
-    height: 15%;
-    flex-direction: column;
-}
-
-.event-container{
-    flex-direction: column;
-    height: 45%;
-}
-
-.prop-container{
-    flex-direction: column;
-    padding-left: 2px;
-}
-
-.ani-container{
-    flex-direction: column;
-    height: 100%;
-    flex-weight: 1;
-}
-
-.gradient-container{
-    flex-direction: column;
-    height: 40%;
-}
-
-.function-container{
-    flex-direction: column;
-    height: 35%;
-}
-
-.access-container{
-    flex-direction: column;
-    height: 20%;
-}
-
-.atom-container{
-    flex-direction: column;
-    height: 60%;
-}
-
-.multimode-container{
-    flex-direction: column;
+  flex-direction: column;
+  height: 70%;
 }
 
 .title{
-    width: 100%;
-    font-size: 18px;
-    margin: 2px;
-    font-weight: bold;
-    text-align: center;
+  width: 100%;
+  font-size: 18px;
+  margin: 2px;
+  padding: 2px;
+  font-weight: bold;
+  text-align: center;
 }
+
 .sub-title{
-    width: 100%;
-    height: 25px;
-    font-size: 15px;
-    text-align: left;
-    margin-bottom: 1px;
-    padding: 2px;
+  width: 100%;
+  font-size: 14px;
+  text-align: left;
+  margin: 2px;
+  padding: 2px;
 }
 
 .style1{
-    width: 100%;
-    mask-color:red;
-    height: 100%;
-    min-width: 25px;
-    min-height: 10px;
-    max-width: 300px;
-    max-height: 50px;
-    padding-left: 10px;
-    padding-top: 1px;
-    padding-right: 15px;
-    padding-bottom: 1px;
-    margin-left: 10px;
-    margin-top: 0px;
-    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;
+  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: 70%;
-    height: 12%;
-    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;
-
+  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;
+  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: 1px;
-    margin: 5px;
-    border: 2px solid #000000;
+  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;
+  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 {
-    height: 40px;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    color: green;
-    stroke-width: 20px;
-    mask-color:lightblue;
-    line-cap: round;
-}
-
-.pstyle {
-    height: 10%;
-    margin-bottom: 1px;
-    margin-top: 1px;
-    color: green;
-    stroke-width: 20px;
-    mask-color:lightblue;
-    line-cap: round;
+  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;
 }
 
+.event-container{
+  flex-direction: column;
+  flex-weight: 1;
+}
 
 .event1{
-    width: 60%;
-    flex-weight: 1;
-    background-color: salmon;
+  width: 60%;
+  flex-weight: 1;
+  background-color: yellow;
 }
 
 .event2{
-    width: 70%;
-    flex-weight: 1;
-    background-color: darkorchid;
+  width: 70%;
+  flex-weight: 1;
+  background-color: red;
 }
 
 .event3{
-    width: 80%;
-    flex-weight: 1;
-    background-color: #ad4e2a;
+  width: 80%;
+  flex-weight: 1;
+  background-color: #ad4e2a;
 }
 
 .event4{
-    flex-direction: row;
-    width: 90%;
-    flex-weight: 1;
-    overflow:scroll;
+  flex-direction: row;
+  width: 90%;
+  flex-weight: 1;
+  overflow:scroll;
 }
 
 .event5{
-    flex-direction: column;
-    width: 100%;
-    height: 90px;
-    overflow:scroll;
+  flex-direction: column;
+  width: 100%;
+  height: 90px;
+  overflow:scroll;
+}
+
+.prop-container{
+  flex-direction: column;
 }
 
 #prop1 {
-    height: 50px;
-    color: #ad4e2a;
-    stroke-width: 10px;
-    line-cap: square;
-    margin: 5px;
+  height: 30px;
+  background-color: mediumslateblue;
+  width: 100%;
+  margin: 5px;
 }
 
 .prop2 {
-    height: 50px;
-    color: #343524;
-    stroke-width: 15px;
-    line-cap: round;
-    margin: 5px;
+  height: 30px;
+  background-color: pink;
+  width: 100%;
+  margin: 5px;
 }
 
-.prop4 {
-    color: #456345;
-    stroke-width: 25px;
-    line-cap: round;
-    margin: 5px;
+.prop3 {
+  height: 30px;
+  background-color: darkseagreen;
+  width: 100%;
+  margin: 5px;
 }
 
-.prop5 {
-    color: #831834;
-    stroke-width: 40px;
-    line-cap: square;
-    margin: 5px;
-    height: 70px;
+.ani-container{
+  flex-direction: column;
+  height: 100%;
+  flex-weight: 1;
 }
 
 .ani1{
-    color: #72ac33;
-    stroke-width: 55px;
-    line-cap: square;
-    margin: 5px;
-    transform-origin: 0% 0%;
-    animation: ani1Go 3s infinite;
+  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) skew(40deg);
-        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) skewX(25deg) skewY(15deg)
-    }
-    to {
-        background-color: #6160f7;
-        opacity:1;
-        width:90px;
-        height: 90px;
-        background-position:22% 22%;
-        transform:rotate(180deg) scale(2)
-    }
+  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: 100%;
-    height: 55px;
-    margin: 5px;
+  background-color: #ad4e2a;
+  width: 55px;
+  height: 55px;
+  margin: 5px;
+}
+
+.gradient-container{
+  flex-direction: column;
 }
 
 .gradient1{
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
-    background: linear-gradient(red, #00ff00);
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(red, #00ff00);
 }
 
 .gradient2{
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
-    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
 }
 
 .gradient3{
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
-    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
 }
 
 .gradient4{
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
-    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+  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{
-    color: #321124;
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
+  background-color: #321124;
+  margin: 5px;
+  width: 90%;
+  height: 30px;
 }
 
-.multimode1{
-    color: #978666;
-    stroke-width: 30px;
-    line-cap: square;
-    margin: 5px;
+.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: 30px;
+  background-color: #ff0000;
+  width: 60%;
+  height: 20px;
 }
 
 .function2{
-    background-color: #00ff00;
-    width: 60%;
-    height: 30px;
+  background-color: #00ff00;
+  width: 60%;
+  height: 20px;
 }
 
 .function3{
-    background-color: #0000ff;
-    width: 100%;
-    height: 30px;
+  background-color: #0000ff;
+  width: 100%;
+  height: 20px;
 }
 
-.function4 {
-    flex-direction: row;
-    width: 60%;
-    height: 60px;
-    overflow: scroll;
-}
+.function4{
+  flex-direction: row;
+  width: 60%;
+  height: 20px;
+  overflow:scroll;
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/stack/index.hml

 <!--/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -15,7 +15,6 @@
 
 <div class="container">
     <div class="sub-container">
-        <!-- 通用样式 -->
         <div class="style-container">
             <text class="title">
                 通用样式
@@ -24,94 +23,55 @@
                 stack通用样式1
             </text>
             <stack class="style1">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
             </stack>
-
             <text  class="sub-title">
                 stack通用样式2
             </text>
             <stack class="style2">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
             </stack>
-
-            <text  class="sub-title">
+            <text class="sub-title">
                 stack通用样式3
             </text>
             <stack class="style3">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
             </stack>
-
             <text  class="sub-title">
                 stack通用样式4
             </text>
             <stack class="style4">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
             </stack>
-
             <text  class="sub-title">
                 stack通用样式5
             </text>
             <div class="contain1">
                 <stack class="style5">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
                 </stack>
                 <stack class="style6">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
                 </stack>
             </div>
-            <text  class="sub-title">
-                stack特有样式
-            </text>
-            <stack class="style7">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
-            </stack>
         </div>
         <divider style="color: #000000; stroke-width: 2px;" vertical="false">
         </divider>
-        <!-- 动画 -->
         <div class="ani-container">
-                <text class="title">
-                    动画样式
-                </text>
-                <text class="sub-title">
-                    stack动画样式1
-                </text>
-                <stack class="style7 ani1">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
-                </stack>
-
-                <text class="sub-title">
-                    stack动画样式2
-                </text>
-                <stack class="style7 ani2">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
-                </stack>
-            </div>
+            <text class="title">
+                动画样式
+            </text>
+            <text class="sub-title">
+                stack动画样式1
+            </text>
+            <stack class="ani1" >
+            </stack>
+            <text class="sub-title">
+                stack动画样式2
+            </text>
+            <stack class="ani2" >
+            </stack>
+        </div>
     </div>
 
     <div style="background-color: #000000; width: 2px; height: 100%;">
     </div>
 
     <div class="sub-container">
-        <!-- 通用属性 -->
         <div class="prop-container">
             <text class="title">
                 通用属性
@@ -119,63 +79,27 @@
             <text class="sub-title">
                 stack通用属性1
             </text>
-            <stack id="prop1"
-                   disabled = "true"
-                   focusable ="true"
-                   data-name ="prop1"
-                   click-effect="spring-medium"
-                   dir ="rtl">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack id="prop1" class="prop1"
+                 disabled = "true" focusable ="true"
+                 data-name ="prop1" click-effect="spring-medium"
+                 dir ="rtl">
             </stack>
-
             <text  class="sub-title">
                 stack通用属性2
             </text>
-            <stack class="prop2"
-                   ref ="prop2"
-                   disabled = "false"
-                   focusable ="false"
-                   data-name ="prop2"
-                   click-effect="spring-large"
-                   dir ="ltr">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="prop2" ref ="prop2"
+                 disabled = "false" focusable ="false"
+                 data-name ="prop2" click-effect="spring-large"
+                 dir ="ltr">
             </stack>
-
             <text  class="sub-title">
                 stack通用属性3
             </text>
-            <stack style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;height: 50px;">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
-            </stack>
-
-            <text  class="sub-title">
-                stack特有属性4
-            </text>
-            <stack class="prop4"
-                   style="height: 50px;">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
-            </stack>
-
-            <text  class="sub-title">
-                stack特有属性5
-            </text>
-            <stack class="prop5" style="height: 50px;">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack style="color: #679855; margin: 5px;" class="prop3">
             </stack>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
-        <!-- 通用事件 -->
         <div class="event-container" >
             <text class="title">
                 通用事件
@@ -183,68 +107,30 @@
             <text  class="sub-title">
                 stack通用事件1
             </text>
-            <stack class="pstyle event1"
-                   ontouchstart="touchStart"
-                   ontouchmove="touchMove"
-                   ontouchend="touchEnd"
-                   ontouchcancel="touchCancel">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
+                 ontouchend="touchEnd" ontouchcancel="touchCancel">
             </stack>
-
             <text  class="sub-title">
                 stack通用事件2
             </text>
-            <stack class="pstyle event2"
-                   onclick="click"
-                   ondoubleclick="doubleClick"
-                   onlongpress="longPress"
-                   onfocus="focus"
-                   onblur="blur"
-                   onkey="key"
-                   onswipe="swipe"
-                   onattached="attached"
-                   ondetached="detached"
-                    >
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class ="event2" onclick="click" ondoubleclick="doubleClick"
+                 onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
+                 onswipe="swipe" onattached="attached" ondetached="detached">
             </stack>
-
             <text  class="sub-title">
                 stack通用事件3
             </text>
-            <stack class="pstyle event3"
-                   ontouchstart="functionTest1"
-                   onpinchstart="pinchStart"
-                   onpinchupdate="pinchUpdate"
-                   onpinchend="pinchEnd"
-                   onpinchcancel="pinchCancel"
-                   ondragstart="dragStart"
-                   ondrag="drag"
-                   ondragend="dragEnd"
-                   ondragenter="dragEnter"
-                   ondragover="dragOver"
-                   ondragleave="dragLeave"
-                   ondrop="drop">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
+                 onpinchend="pinchEnd" onpinchcancel="pinchCancel"
+                 ondragstart="dragStart" ondrag="drag"
+                 ondragend="dragEnd" ondragenter="dragEnter"
+                 ondragover="dragOver" ondragleave="dragLeave"
+                 ondrop="drop">
             </stack>
 
-            <text  class="sub-title">
-                stack通用事件4
-            </text>
-            <stack class="pstyle event4">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
-            </stack>
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
-        <!-- 通用方法 -->
         <div class="function-container">
             <text class="title">
                 通用方法
@@ -252,34 +138,17 @@
             <text class="sub-title">
                 stack通用方法1
             </text>
-            <stack class="pstyle function1"
-                   id="function1"
-                   ontouchstart="functionTest1">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack id="function1" class="function1" ontouchstart="functionTest1">
             </stack>
-
             <text class="sub-title">
                 stack通用方法2
             </text>
-            <stack class="pstyle function2"
-                   id="function2"
-                   ontouchstart="functionTest2">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack id="function2" class="function2" ontouchstart="functionTest2">
             </stack>
-
             <text class="sub-title">
                 stack通用方法3
             </text>
-            <stack class="pstyle function3"
-                   id="function3"
-                   ontouchstart="functionTest3">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack id="function3" class="function3" ontouchstart="functionTest3">
             </stack>
         </div>
     </div>
@@ -288,7 +157,6 @@
     </div>
 
     <div class="sub-container">
-        <!-- 渐变样式 -->
         <div class="gradient-container">
             <text class="title">
                 渐变样式
@@ -296,43 +164,26 @@
             <text class="sub-title">
                 stack渐变样式1
             </text>
-            <stack class="style7 gradient1">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="gradient1">
             </stack>
-
             <text  class="sub-title">
                 stack渐变样式2
             </text>
-            <stack class="style7 gradient2">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="gradient2">
             </stack>
-
             <text  class="sub-title">
                 stack渐变样式3
             </text>
-            <stack class="style7 gradient3">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="gradient3">
             </stack>
-
             <text  class="sub-title">
                 stack渐变样式4
             </text>
-            <stack class="style7 gradient4">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="gradient4">
             </stack>
-
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
-        <!-- 无障碍 -->
         <div class="access-container">
             <text class="title">
                 无障碍
@@ -340,20 +191,14 @@
             <text class="sub-title">
                 stack无障碍1
             </text>
-            <stack class="access1"
-                   accessibilitygroup ="true"
-                   accessibilitytext="这是div"
-                   accessibilitydescription="点击此按键会弹出一个对话框"
-                   accessibilityimportance="no-hide-descendants">
-                <div class="back-child bd-radius"></div>
-                <div class="positioned-child bd-radius"></div>
-                <div class="front-child bd-radius"></div>
+            <stack class="access1" accessibilitygroup ="true"
+                 accessibilitytext="这是div"
+                 accessibilitydescription="点击此按键会弹出一个对话框"
+                 accessibilityimportance="no-hide-descendants">
             </stack>
-
         </div>
         <div style="background-color: #000000; width: 100%; height: 2px;">
         </div>
-        <!-- 原子布局和多模输入 -->
         <div class="atom-container">
             <text class="title">
                 原子布局
@@ -362,81 +207,48 @@
                 stack原子布局1
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="width:20px;height:20px;background-color: blue;display-index: 1;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="width:30px; height:20px;background-color: black;display-index: 5;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="width:40px; height:20px;background-color: yellow;display-index: 4;">
                 </stack>
             </div>
             <text class="sub-title">
                 stack原子布局2
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="height:20px;background-color: blue;flex-weight: 1;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="height:20px;background-color: black;flex-weight: 5;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="height:20px;background-color: yellow;flex-weight: 4;">
                 </stack>
             </div>
             <text class="sub-title">
                 stack原子布局3
             </text>
-            <div style="flex-direction: row;height:40px;width: 100%;">
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+            <div style="flex-direction: row;height:60px;width: 100%;">
+                <stack style="width:30px;background-color: blue;aspect-ratio: 0.6;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="width:30px;background-color: black;aspect-ratio:0.5;">
                 </stack>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
                 </stack>
             </div>
             <div style="background-color: #000000; width: 100%; height: 2px;">
             </div>
-            <div class="multimode-container">
+            <div class="multiMode-container">
                 <text class="title">
                     多模输入
                 </text>
                 <text class="sub-title">
                     stack多模输入1
                 </text>
-                <stack class="style7">
-                    <div class="back-child bd-radius"></div>
-                    <div class="positioned-child bd-radius"></div>
-                    <div class="front-child bd-radius"></div>
+                <stack class="multiMode1" voicelabel = "voice"
+                     subscriptflag="on" subscriptlabel="div" scenelabel="common">
                 </stack>
             </div>
         </div>
     </div>
 </div>
-
-
-
-

ace/ace_standard/src/main/js/default/pages/stack/index.js

@@ -84,6 +84,7 @@ var frames = [
 ];
 
 export default {
+
     onShow(){
         // 通用属性
         var prop1 =  this.$element('prop1');
@@ -410,6 +411,7 @@ export default {
 
     functionTest3(event){
         var function3 =  this.$element('function3');
+
         var animation = function3.animate(frames, options);
         animation.play()
         animation.onfinish = function(){
@@ -484,4 +486,4 @@ export default {
             message: 'reachBottom'
         });
     }
-}
\ No newline at end of file
+}

ace/ace_standard/src/main/js/default/pages/stepper/index.hml

@@ -22,7 +22,7 @@
         <text class="sub-title">
             stepper通用样式1
         </text>
-        <stepper class="style1" id="mystepper" index="0"  onnext="next" onback="back">
+        <stepper class="style1" id="style1" index="0"  onnext="next" onback="back">
             <stepper-item class ="stepperItem istyle1" label="{{label1}}">
                 <div class = "stepperItemContent" >
                     <text class = "text">First</text>
@@ -46,7 +46,7 @@
         <text  class="sub-title">
             stepper通用样式2
         </text>
-        <stepper class="style2" id="mystepper" index="0"  onnext="next" onback="back">
+        <stepper class="style2" id="style2" index="0"  onnext="next" onback="back">
             <stepper-item class ="stepperItem istyle4" label="{{label1}}">
                 <div class = "stepperItemContent" >
                     <text class = "text">First</text>
@@ -70,7 +70,7 @@
         <text  class="sub-title">
             stepper通用样式3
         </text>
-        <stepper class="style3" id="mystepper" index="0"  onnext="next" onback="back">
+        <stepper class="style3" id="style3" index="0"  onnext="next" onback="back">
             <stepper-item class ="stepperItem" label="{{label1}}">
                 <div class = "stepperItemContent" >
                     <text class = "text">First</text>
@@ -94,7 +94,7 @@
         <text  class="sub-title">
             stepper通用样式4
         </text>
-        <stepper class="style4" id="mystepper" index="0"  onnext="next" onback="back">
+        <stepper class="style4" id="style4" index="0"  onnext="next" onback="back">
             <stepper-item class ="stepperItem istyle7" label="{{label1}}">
                 <div class = "stepperItemContent" >
                     <text class = "text">First</text>
@@ -118,7 +118,7 @@
             stepper通用样式5
         </text>
         <div class="contain1">
-            <stepper class="style5" id="mystepper" index="0"  onnext="next" onback="back">
+            <stepper class="style5" id="style5" index="0"  onnext="next" onback="back">
                 <stepper-item class ="stepperItem" label="{{label1}}">
                     <div class = "stepperItemContent" >
                         <text class = "text">First</text>
@@ -138,7 +138,7 @@
                     <button type="capsule" class ="button" value="stepper1" onclick="setRightButton"></button>
                 </stepper-item>
             </stepper>
-            <stepper class="style6" id="mystepper" index="0"  onnext="next" onback="back">
+            <stepper class="style6" id="style6" index="0"  onnext="next" onback="back">
                 <stepper-item class ="stepperItem" label="{{label1}}">
                     <div class = "stepperItemContent" >
                         <text class = "text">First</text>
@@ -162,7 +162,7 @@
         <text  class="sub-title">
             stepper特有样式
         </text>
-        <stepper class="style7" id="mystepper" index="0"  onnext="next" onback="back">
+        <stepper class="style7" id="style7" index="0"  onnext="next" onback="back">
             <stepper-item class ="stepperItem" label="{{label1}}">
                 <div class = "stepperItemContent" >
                     <text class = "text">First</text>
@@ -194,7 +194,7 @@
                 stepper动画样式1
             </text>
             <stepper class="stylePro ani1"
-                     id="mystepper"
+                     id="ani1"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -222,7 +222,7 @@
                 stepper动画样式2
             </text>
             <stepper class="stylePro ani2"
-                     id="mystepper"
+                     id="ani2"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -290,7 +290,7 @@
             <text  class="sub-title">
                 stepper通用属性2
             </text>
-            <stepper class="stylePro" id="prop2"
+            <stepper class="stylePro" ref="prop2"
                      data-name ="prop2"
                      dir ="rtl"  index="0"  onnext="next" onback="back">
                 <stepper-item class ="stepperItem gradient4" label="{{label1}}">
@@ -341,7 +341,7 @@
             <text  class="sub-title">
                 stepper特有属性4
             </text>
-            <stepper class="stylePro" id="mystepper" index="1"  onnext="next" onback="back">
+            <stepper class="stylePro" id="prop4" index="1"  onnext="next" onback="back">
                 <stepper-item class ="stepperItem" label="{{label1}}">
                     <div class = "stepperItemContent" >
                         <text class = "text">First</text>
@@ -373,7 +373,7 @@
                 stepper通用事件1
             </text>
             <stepper class="stylePro event1"
-                     id="mystepper"
+                     id="event1"
                      finish = "finishTest"
                      skip = "skipTest"
                      change = "changeTest"
@@ -416,7 +416,7 @@
             </text>
             <stepper class="stylePro event2"
                      ontouchstart="functionTest3"
-                     id="mystepper"
+                     id="event2"
                      index="1"
                      onnext="next"
                      onback="back"
@@ -486,7 +486,7 @@
                 stepper通用方法1
             </text>
             <stepper class="stylePro function1"
-                     id="mystepper1" index="1"
+                     id="function1" index="1"
                      onnext="next"
                      onback="back"
                      ontouchstart="functionTest1">
@@ -520,7 +520,7 @@
             </text>
             <stepper class="stylePro function2"
                      ontouchstart="functionTest2"
-                     id="mystepper2"
+                     id="function2"
                      index="1"
                      onnext="next"
                      onback="back"
@@ -570,7 +570,7 @@
                 stepper渐变样式1
             </text>
             <stepper class="stylePro gradient1"
-                     id="mystepper"
+                     id="gradient1"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -598,7 +598,7 @@
                 stepper渐变样式2
             </text>
             <stepper class="stylePro gradient2"
-                     id="mystepper"
+                     id="gradient2"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -626,7 +626,7 @@
                 stepper渐变样式3
             </text>
             <stepper class="stylePro gradient3"
-                     id="mystepper"
+                     id="gradient3"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -654,7 +654,7 @@
                 stepper渐变样式4
             </text>
             <stepper class="stylePro gradient4"
-                     id="mystepper"
+                     id="gradient4"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -694,7 +694,7 @@
                      accessibilitytext="这是div"
                      accessibilitydescription="点击此按键会弹出一个对话框"
                      accessibilityimportance="no-hide-descendants"
-                     id="mystepper"
+                     id="access1"
                      index="0"
                      onnext="next"
                      onback="back">
@@ -731,7 +731,7 @@
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="ato1"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -755,7 +755,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="ato2"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -779,7 +779,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="ato3"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -809,7 +809,7 @@
             </text>
             <div style="flex-direction: row;height: 30px;width: 100%;">
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atom1"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -833,7 +833,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atom2"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -857,7 +857,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atom3"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -886,7 +886,7 @@
             </text>
             <div style="flex-direction: row;height:30px;width: 100%;">
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atomA1"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -910,7 +910,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atomA2"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -934,7 +934,7 @@
                     </stepper-item>
                 </stepper>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="atomA3"
                          index="0"
                          onnext="next"
                          onback="back">
@@ -968,7 +968,7 @@
                     stepper多模输入1
                 </text>
                 <stepper class="stylePro"
-                         id="mystepper"
+                         id="mul1"
                          index="0"
                          onnext="next"
                          onback="back">

ace/ace_standard/src/main/js/default/pages/stepper/index.js

@@ -106,10 +106,39 @@ export default {
     },
     setRightButton(e) {
         this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style5').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style6').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('style7').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('ani1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('ani2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
         this.$element('prop1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
         this.$element('prop2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
-        this.$element('mystepper1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
-        this.$element('mystepper2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('prop3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('prop4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('event1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('event2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('function1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('function2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('gradient1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('gradient2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('gradient3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('gradient4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('access1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('ato1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('ato2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('ato3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atom1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atom2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atom3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atomA1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atomA2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('atomA3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+        this.$element('mul1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
     },
     next(e) {
         var index = {
@@ -447,7 +476,7 @@ export default {
     },
 
     functionTest1(event){
-        var function1 =  this.$element('mystepper1');
+        var function1 =  this.$element('function1');
         function1.focus(true)
         var rect = function1.getBoundingClientRect();
         var width = rect.width;
@@ -462,7 +491,7 @@ export default {
     },
 
     functionTest2(event){
-        var function2 =  this.$element('mystepper2');
+        var function2 =  this.$element('function2');
         let observer = function2.createIntersectionObserver({
             ratios: [0.2, 0], // number
         });

ace/ace_standard/src/main/js/default/pages/tab-bar/index.css

+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.tabs {
+    width: 100%;
+    height: 40px;
+}
+.tabcontent {
+    width: 100%;
+    height: 20%;
+    justify-content: center;
+}
+.item-content {
+    height: 100%;
+    justify-content: center;
+}
+.item-title {
+    font-size: 12px;
+}
+.tab-bar {
+    margin: 1px;
+    width: 100%;
+    height: 60%;
+    border-color: #007dff;
+    border-width: 1px;
+}
+.tab-text {
+    font-size: 9px;
+    width: 100%;
+    text-align: center;
+}
+
+.container {
+    flex-direction:row;
+    width:100%;
+    height:100%;
+    padding: 1px;
+}
+
+.sub-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 1;
+}
+
+.style-container{
+    flex-direction: column;
+    height: 70%;
+}
+.contain1{
+    width: 100%;
+    height: 20%;
+    flex-direction: column;
+}
+.ani-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 1;
+}
+
+.prop-container{
+    height: 70%;
+    flex-direction: column;
+    padding-left: 2px;
+}
+
+.event-container{
+    flex-direction: column;
+    height: 40%;
+}
+
+.function-container{
+    flex-direction: column;
+    height: 30%;
+}
+
+.gradient-container{
+    flex-direction: column;
+    height: 40%;
+}
+
+.access-container{
+    flex-direction: column;
+    height: 20%;
+}
+
+.atom-container{
+    flex-direction: column;
+    height: 60%;
+}
+
+.multimode-container{
+    flex-direction: column;
+}
+
+.title{
+    width: 100%;
+    font-size: 18px;
+    margin: 2px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.sub-title{
+    width: 100%;
+    font-size: 13px;
+    text-align: center;
+    margin-top: 1px;
+}
+
+.style1{
+    width: 100%;
+    height: 40px;
+    min-width: 25px;
+    min-height: 10px;
+    max-width: 300px;
+    max-height: 60px;
+    padding-left: 1px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-bottom: 1px;
+    margin-left: 1px;
+    margin-top: 1px;
+    margin-right: 1px;
+    margin-bottom: 1px;
+    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: 100%;
+    height: 40px;
+    padding-start: 1px;
+    padding-end: 1px;
+    margin-start: 2px;
+    margin-end: 1px;
+    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-top: 30%;
+    padding-left: 10%;
+    padding-right: 10%;
+    padding-bottom: 30%;
+    margin: 1px;
+    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: 100%;
+    height: 40px;
+    padding: 1px;
+    margin: 2px;
+    border: 2px solid #000000;
+}
+
+.style5{
+    width: 100%;
+    height: 60px;
+    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: 100%;
+    height: 60px;
+    position: absolute;
+    left: -57;
+    top: 15px;
+    bottom: 5px;
+    right: 2px;
+    background-color: pink;
+    border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.barStyle6{
+    width: 100%;
+    height: 35%;
+    background-color: pink;
+    border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    color: green;
+    stroke-width: 40px;
+    line-cap: round;
+}
+
+.tstyle {
+    width: 100%;
+    height: 30px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    color: green;
+    stroke-width: 40px;
+    line-cap: round;
+}
+
+.barStyle7{
+    width: 100%;
+    height: 60px;
+    margin-bottom: 2px;
+    margin-top: 6px;
+    color: green;
+}
+
+.event1{
+    width: 100%;
+    height: 40px;
+    background-color: salmon;
+}
+
+.event2{
+    width: 100%;
+    height: 40px;
+    background-color: darkorchid;
+}
+
+.event3{
+    width: 100%;
+    height: 40px;
+    background-color: #ad4e2a;
+}
+
+.event4{
+    flex-direction: row;
+    width: 100%;
+    height: 40px;
+    overflow:scroll;
+}
+
+.event5{
+    flex-direction: column;
+    width: 100%;
+    height: 90px;
+    overflow:scroll;
+}
+
+#prop1 {
+    color: #ad4e2a;
+    width: 100%;
+    height: 40px;
+    margin: 1px;
+    border-color: #007dff;
+    border-width: 1px;
+}
+
+.prop2 {
+    color: #343524;
+    stroke-width: 15px;
+    line-cap: round;
+    margin: 5px;
+}
+
+.prop4 {
+    color: #456345;
+    stroke-width: 25px;
+    line-cap: round;
+    margin: 5px;
+}
+
+.prop5 {
+    color: #831834;
+    stroke-width: 40px;
+    line-cap: square;
+    margin: 5px;
+    height: 70px;
+}
+
+
+.ani1{
+    color: #72ac33;
+    stroke-width: 55px;
+    line-cap: square;
+    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) skew(40deg);
+        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) skewX(25deg) skewY(15deg)
+    }
+    to {
+        background-color: #6160f7;
+        opacity:1;
+        width:90px;
+        height: 90px;
+        background-position:22% 22%;
+        transform:rotate(180deg) scale(2)
+    }
+}
+
+.ani2{
+    background-color: #ad4e2a;
+    width: 100%;
+    height: 55px;
+    margin: 5px;
+}
+
+.gradient1{
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+    background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+    background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+    background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+    color: #321124;
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+}
+
+.multimode1{
+    color: #978666;
+    stroke-width: 30px;
+    line-cap: square;
+    margin: 5px;
+}
+
+
+.function1{
+    background-color: #ff0000;
+    width: 60%;
+    height: 30px;
+}
+
+.function2{
+    background-color: #00ff00;
+    width: 60%;
+    height: 30px;
+}
+
+.function3{
+    background-color: #0000ff;
+    width: 100%;
+    height: 30px;
+}
+
+.function4 {
+    flex-direction: row;
+    width: 60%;
+    height: 60px;
+    overflow: scroll;
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/tabs/index.css

@@ -72,7 +72,7 @@
 }
 
 .prop-container{
-    height: 60%;
+    height: 70%;
     flex-direction: column;
     padding-left: 2px;
 }
@@ -84,7 +84,7 @@
 
 .function-container{
     flex-direction: column;
-    height: 40%;
+    height: 30%;
 }
 
 .gradient-container{
@@ -263,6 +263,17 @@
     stroke-width: 40px;
     line-cap: round;
 }
+
+.tstyle {
+    width: 100%;
+    height: 30px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    color: green;
+    stroke-width: 40px;
+    line-cap: round;
+}
+
 .barStyle7{
     width: 100%;
     height: 60px;
@@ -290,44 +301,29 @@
 }
 
 .event4{
-    flex-direction: row;
     width: 100%;
     height: 40px;
-    overflow:scroll;
+    background-color: blanchedalmond;
 }
 
-.event5{
-    flex-direction: column;
-    width: 100%;
-    height: 90px;
-    overflow:scroll;
-}
 
 #prop1 {
-    color: #ad4e2a;
-    stroke-width: 10px;
-    line-cap: square;
+    background-color: mediumslateblue;
     margin: 5px;
 }
 
 .prop2 {
-    color: #343524;
-    stroke-width: 15px;
-    line-cap: round;
+    background-color: salmon;
     margin: 5px;
 }
 
 .prop4 {
-    color: #456345;
-    stroke-width: 25px;
-    line-cap: round;
+    background-color: skyblue;
     margin: 5px;
 }
 
 .prop5 {
-    color: #831834;
-    stroke-width: 40px;
-    line-cap: square;
+    background-color: gold;
     margin: 5px;
     height: 70px;
 }
@@ -413,9 +409,7 @@
 }
 
 .multimode1{
-    color: #978666;
-    stroke-width: 30px;
-    line-cap: square;
+    background-color: firebrick;
     margin: 5px;
 }