diff --git a/UI/AtomicLayout/entry/src/main/config.json b/UI/AtomicLayout/entry/src/main/config.json
index e245734e15f137487499969665f301bd116de4a2..1182e1df1b72b8466becde4d828e1bfb5b0ada99 100644
--- a/UI/AtomicLayout/entry/src/main/config.json
+++ b/UI/AtomicLayout/entry/src/main/config.json
@@ -50,7 +50,11 @@
           "pages/percentage/index",
           "pages/fixed/index"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
       }
     ]
   }
diff --git a/UI/AtomicLayout/entry/src/main/js/default/common/common.css b/UI/AtomicLayout/entry/src/main/js/default/common/common.css
index 0806a85275e41ff28fd39219b6faecb37edcfc1f..6f7560624de4238021fd6a1b3bd96ffba0532255 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/common/common.css
+++ b/UI/AtomicLayout/entry/src/main/js/default/common/common.css
@@ -18,20 +18,29 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .box {
-    width: 100%;
+    width: 350px;
     align-items: center;
     flex-direction: column;
     background-color: bisque;
 }
 
+.button-flex {
+    width: 350px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
 .btn {
-    width: 60%;
-    height: 100px;
-    font-size: 40px;
-    margin-top: 20px;
+    width: 80%;
+    height: 90px;
+    font-size: 30px;
+    margin: 10px;
     color: #ff00ff7f;
 }
\ No newline at end of file
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/fixed/index.hml b/UI/AtomicLayout/entry/src/main/js/default/pages/fixed/index.hml
index 1fa18b22450a49a8bc3b6504f51221b47e1e5398..43cea8b30fc78cca9b3649eff96054133d9c87c9 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/fixed/index.hml
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/fixed/index.hml
@@ -17,6 +17,8 @@
     <div class="box" style="height : {{ height }}; width : {{ width }};">
         <text class="red-box">A</text>
     </div>
-    <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
-    <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    <div class="button-flex">
+        <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
+        <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.css b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.css
index a2b192ede28358fc0230dbbb4ac36a1052ab14b2..53813ffdd99cc9f427702e936b6314807f4ef44b 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.css
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.css
@@ -17,7 +17,7 @@
 
 .aquamarine-box {
     width: 50%;
-    height: 150px;
+    height: 120px;
     display-index: 3;
     text-align: center;
     background-color: #DAF7A6;
@@ -25,7 +25,7 @@
 
 .yellow-box {
     width: 50%;
-    height: 150px;
+    height: 120px;
     display-index: 2;
     text-align: center;
     background-color: #FFC300;
@@ -33,7 +33,7 @@
 
 .red-box {
     width: 50%;
-    height: 150px;
+    height: 120px;
     display-index: 1;
     text-align: center;
     background-color: #FF5733;
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.hml b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.hml
index fcefc81dd09c7910506657b89404d78e18021680..7bb8007b8b52a902f1aad588e3493a35171f6491 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.hml
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.hml
@@ -19,6 +19,8 @@
         <text class="yellow-box">B</text>
         <text class="red-box">C</text>
     </div>
-    <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
-    <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    <div class="button-flex">
+        <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
+        <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.js b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.js
index ae6c0da943b8d2f56bfc5f92d78e6d1fe6f3dc02..6b22dfdbd7a981b14dd0e46287e27e93ac1c564f 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.js
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/hide/index.js
@@ -21,6 +21,6 @@ export default {
         this.height = "200px"
     },
     onClickRefresh() {
-        this.height = "600px"
+        this.height = "500px"
     }
 }
\ No newline at end of file
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/index/index.css b/UI/AtomicLayout/entry/src/main/js/default/pages/index/index.css
index 169b7190ad7079ad681b7bac152441d590b3620b..ca813692600d08f08fc6adbb209367a86d936cc0 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/index/index.css
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/index/index.css
@@ -12,6 +12,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-@import "../../common/common.css";
-
+@import "../../common/common.css";
\ No newline at end of file
diff --git a/UI/AtomicLayout/entry/src/main/js/default/pages/percentage/index.hml b/UI/AtomicLayout/entry/src/main/js/default/pages/percentage/index.hml
index fcefc81dd09c7910506657b89404d78e18021680..7bb8007b8b52a902f1aad588e3493a35171f6491 100644
--- a/UI/AtomicLayout/entry/src/main/js/default/pages/percentage/index.hml
+++ b/UI/AtomicLayout/entry/src/main/js/default/pages/percentage/index.hml
@@ -19,6 +19,8 @@
         <text class="yellow-box">B</text>
         <text class="red-box">C</text>
     </div>
-    <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
-    <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    <div class="button-flex">
+        <button class="btn" value="{{ $t('strings.refresh') }}" onclick="onClickRefresh"></button>
+        <button class="btn" value="{{ $t('strings.return') }}" onclick="onClickReturn"></button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/UI/International/entry/src/main/config.json b/UI/International/entry/src/main/config.json
index f278593bba6a0db2a25d5dfc9a5dd76e25ecf9b9..c6c9ca723009540f29ddc84c6320f29d5a715b8e 100644
--- a/UI/International/entry/src/main/config.json
+++ b/UI/International/entry/src/main/config.json
@@ -49,7 +49,11 @@
         "pages": [
           "pages/index/index"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
       }
     ]
   }
diff --git a/UI/International/entry/src/main/js/default/pages/index/index.css b/UI/International/entry/src/main/js/default/pages/index/index.css
index 42aa5abe7c0e23473c8ec6c8981927f17330ad10..92db4d9e7a533bdbbd11d6425e21a34657283f03 100644
--- a/UI/International/entry/src/main/js/default/pages/index/index.css
+++ b/UI/International/entry/src/main/js/default/pages/index/index.css
@@ -14,16 +14,18 @@
  */
 
 .container {
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 10px;
 }
 
 .title {
     font-size: 30px;
     text-align: center;
-    width: 50%;
+    width: 70%;
     border-color: black;
     border-style: solid;
     border-width: 1px;
@@ -31,7 +33,8 @@
 }
 
 .btn {
-    width: 50%;
-    height: 100px;
+    width: 60%;
+    height: 80px;
     font-size: 40px;
+    margin: 10px;
 }
diff --git a/UI/JSUICustomComponent/entry/src/main/config.json b/UI/JSUICustomComponent/entry/src/main/config.json
index ccdef555df232879a895cd0acafd4f85b411e0e0..d297d7ddb75d58c16620b7c9325a856763f6db53 100644
--- a/UI/JSUICustomComponent/entry/src/main/config.json
+++ b/UI/JSUICustomComponent/entry/src/main/config.json
@@ -48,7 +48,11 @@
           "pages/index/index",
           "pages/collect/index"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
       }
     ]
   }
diff --git a/UI/JsAnimationStyle/entry/src/main/config.json b/UI/JsAnimationStyle/entry/src/main/config.json
index 11ef08f565493b3b2e919805c44e20873e2b803a..d1b8949d25e5435d5a70fefd4601d663ea06c99a 100644
--- a/UI/JsAnimationStyle/entry/src/main/config.json
+++ b/UI/JsAnimationStyle/entry/src/main/config.json
@@ -47,10 +47,6 @@
         "pages": [
           "pages/index/index",
           "pages/animation/index/index",
-          "pages/animation/rotate/rotate",
-          "pages/animation/scale/scale",
-          "pages/animation/translate/translate",
-          "pages/animation/compositeanimation/compositeanimation",
           "pages/gradient/index",
           "pages/customfont/index",
           "pages/transitions/index/index",
@@ -61,7 +57,11 @@
           "pages/transitions/customtransition/customtransition",
           "pages/transitions/customtarget/customtarget"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
       }
     ]
   }
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css
index 754a5457c805264ba9fc541434e5de990c8f3f48..25abd2fe5cfe7a495e85646d9b1de8f359d5fe98 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css
@@ -14,14 +14,110 @@
  */
 
 .container {
+    width: 100%;
+    padding-top: 10px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding:10px;
 }
 
-.btn {
-    width: 60%;
-    height: 50px;
+.translate_style {
     font-size: 20px;
-    margin-top: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: blue;
+    width: 100px;
+    height: 100px;
+    transform-origin: 0px 50%;
+    animation-name: translate_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes translate_animation
+{
+    from {
+        transform:translate(0px) ;
+    }
+    to {
+        transform:translate(150px) ;
+    }
+}
+
+.rotate_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    margin-top: 30px;
+    animation-name: rotate_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes rotate_animation
+{
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(180deg);
+    }
+}
+
+.scale_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: rebeccapurple;
+    width: 100px;
+    height: 100px;
+    margin-top: 30px;
+    animation-name: scale_animation;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes scale_animation
+{
+    from {
+        transform: scale(1.0);
+    }
+    to {
+        transform:scale(2.0);
+    }
+}
+
+.composite_style {
+    font-size: 20px;
+    text-align: center;
+    text-color: black;
+    background-color: #f76160;
+    width: 100px;
+    height: 100px;
+    animation-name:compositeAnimation ;
+    animation-duration: 4s;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+@keyframes compositeAnimation
+{
+    from {
+        background-color: #f76160;
+        transform:translate(-100px,-100px) rotate(0deg) scale(1.0);
+    }
+    to {
+        background-color: #09ba07;
+        transform:translate(200px,100px) rotate(180deg) scale(1.5);
+    }
 }
\ No newline at end of file
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml
index 5764157930e66267d1eb87538d0ff47ad76efdb5..73cffeb81a21cf11ef17f127b8412fd8f44ae117 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml
@@ -14,8 +14,16 @@
  -->
 
 <div class="container">
-    <button class="btn"  value="{{ $t('strings.translate') }}" on:click="onClickTranslate"></button>
-    <button class="btn"  value="{{ $t('strings.rotate') }}"  on:click="onClickRotate"></button>
-    <button class="btn"  value="{{ $t('strings.scale') }}"  on:click="onClickScale"></button>
-    <button class="btn"  value="{{ $t('strings.compositeAnimation') }}"  on:click="onClickComposite"></button>
+    <text class="translate_style">
+        {{ $t('strings.translate') }}
+    </text>
+    <text class="rotate_style">
+        {{ $t('strings.rotate') }}
+    </text>
+    <text class="scale_style" >
+        {{ $t('strings.scale') }}
+    </text>
+    <text class="composite_style">
+        {{ $t('strings.compositeAnimation') }}
+    </text>
 </div>
\ No newline at end of file
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css
index 5a4f2548aa82a33113074aabf1f7566dce192220..13422eed2d8de408f2d6d3f2e12c4d440bb35858 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css
index e0fe2e9b607abfc41d1f66350d4e882a9260ff5b..5d24ce870dca818069d7a8fe54e09ae8f4d6007c 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css
@@ -14,13 +14,15 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 10px;
 }
 .btn {
     width: 60%;
     height: 50px;
     font-size: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
 }
\ No newline at end of file
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css
index 8cba2d399631082d66eac7e7e657c2899d495027..d72837fdca5a03c76974e0514c1f0441a1951c08 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     align-items: center;
     background-color: #ABDAFF;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css
index 866fd05af770381aacbab7396b27d6fc00ec6058..80d5b38da0a0a1465a6a7cbcd92f06d1dee8af37 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css
@@ -14,8 +14,9 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     background-color: #f8f8ff;
     transition-enter: Gocustomtransition;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css
index ebd41739bc074365ca2d44ff525afd8094000991..fd3947b839086867c5099f26f77579eea2d78019 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css
index 754a5457c805264ba9fc541434e5de990c8f3f48..acdd738cf6845a0da91beb734d11279b4ff1fc6f 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css
index bc8ddd7a5b2958233d24a8f105420dd2363e46fa..e3b311ad177ebfc142707beb9f4956d3bee4e30c 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css
index 21915f9a3c5fcf1023b157054354a74dbe448c5d..580ed254de53e2d9bf4521d2681426931dd6f3a1 100644
--- a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css
+++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css
@@ -14,6 +14,7 @@
  */
 
 .container {
+    width: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: center;
diff --git a/UI/JsBrightness/entry/src/main/config.json b/UI/JsBrightness/entry/src/main/config.json
index c691cc2a8fe327af212117ec610bc608b50d0488..58a826a8b043097e709c63a739ec2e74193eab8e 100644
--- a/UI/JsBrightness/entry/src/main/config.json
+++ b/UI/JsBrightness/entry/src/main/config.json
@@ -49,7 +49,11 @@
         "pages": [
           "pages/index/index"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
       }
     ]
   }
diff --git a/UI/JsBrightness/entry/src/main/js/default/pages/index/index.css b/UI/JsBrightness/entry/src/main/js/default/pages/index/index.css
index b8fd01f77f7fcd877ba2a3f0ad2dc7f72e7e1fac..b5917b8a9bfe0ae6448d375b8b93a2f4696ec4f8 100644
--- a/UI/JsBrightness/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JsBrightness/entry/src/main/js/default/pages/index/index.css
@@ -35,4 +35,9 @@
     background-color: lightgray;
     margin: 10px;
     padding: 0px;
+}
+
+.text {
+    width: 40px;
+    font-size: 30;
 }
\ No newline at end of file
diff --git a/UI/JsBrightness/entry/src/main/js/default/pages/index/index.hml b/UI/JsBrightness/entry/src/main/js/default/pages/index/index.hml
index a0fe7d2dd27363e852e86ab94be48d7a08789254..8b353dda103df30561531d00e687e910a2c5be39 100644
--- a/UI/JsBrightness/entry/src/main/js/default/pages/index/index.hml
+++ b/UI/JsBrightness/entry/src/main/js/default/pages/index/index.hml
@@ -16,8 +16,8 @@
 <div class="container">
     <text class="tip">{{ $t('strings.tip') }}</text>
     <div class="slider-div">
-        <text>{{ $t('strings.dark') }}</text>
+        <text class="text">{{ $t('strings.dark') }}</text>
         <slider class="slider" value="125" min="0" max="255" step="1" on:change="brightness"></slider>
-        <text>{{ $t('strings.bright') }}</text>
+        <text class="text">{{ $t('strings.bright') }}</text>
     </div>
 </div>
\ No newline at end of file
diff --git a/UI/JsDialog/entry/src/main/config.json b/UI/JsDialog/entry/src/main/config.json
index 7e461d423be1b49b4ee89e41773235f57993f55d..cd1bf9fad4785ae861ed0ad39829b5ad7aea809f 100644
--- a/UI/JsDialog/entry/src/main/config.json
+++ b/UI/JsDialog/entry/src/main/config.json
@@ -50,7 +50,11 @@
         "pages": [
           "pages/index/index"
         ],
-        "name": ".default"
+        "name": ".default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
       }
     ]
   }
diff --git a/UI/JsDialog/entry/src/main/js/default/pages/index/index.css b/UI/JsDialog/entry/src/main/js/default/pages/index/index.css
index 322728695981a2bcd47a704f3a716c12536b8ebe..d83c608dc0c9308e52c216c9086655cdbbbaac0c 100644
--- a/UI/JsDialog/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JsDialog/entry/src/main/js/default/pages/index/index.css
@@ -144,6 +144,7 @@
     border-width: 1px;
     border-color: black;
     border-style: solid;
+    padding-left: 5px;
 }
 
 .dialog-btn {
diff --git a/UI/JsDialog/entry/src/main/js/default/pages/index/index.hml b/UI/JsDialog/entry/src/main/js/default/pages/index/index.hml
index db0e3be8a004d626c835b94d3fa58a9f5730aff4..f7d560fb6dfd5fd186d18b6687d03d66cecbebf2 100644
--- a/UI/JsDialog/entry/src/main/js/default/pages/index/index.hml
+++ b/UI/JsDialog/entry/src/main/js/default/pages/index/index.hml
@@ -35,7 +35,8 @@
                 </input>
             </list-item>
         </list>
-        <text class="tips" show="{{ showTips }}">
+
+        <text class="tips" if="{{ showTips }}">
             {{ $t('strings.tips') }}
         </text>
     </stack>
@@ -55,11 +56,11 @@
         <div class="dialog-container">
             <div class="dialog-text-container">
                 <text class="dialog-text">{{ $t('strings.name') }}</text>
-                <textarea class="dialog-edit" value="{{ name }}">{{ name }}</textarea>
+                <text class="dialog-edit">{{ name }}</text>
             </div>
             <div class="text-container">
                 <text class="dialog-text">{{ $t('strings.phone') }}</text>
-                <textarea class="dialog-edit" value="{{ phone }}">{{ phone }}</textarea>
+                <text class="dialog-edit">{{ phone }}</text>
             </div>
             <div class="text-container">
                 <input class="dialog-btn" type="button" value="{{ $t('strings.sure') }}" onclick="onConfirm"></input>
diff --git a/UI/JsDialog/entry/src/main/js/default/pages/index/index.js b/UI/JsDialog/entry/src/main/js/default/pages/index/index.js
index 8cc68a2049f483bf50714646ac2a04df8efc2f91..a50135089f43b4968ddc3c8257848bfbb4e1f21f 100644
--- a/UI/JsDialog/entry/src/main/js/default/pages/index/index.js
+++ b/UI/JsDialog/entry/src/main/js/default/pages/index/index.js
@@ -23,7 +23,6 @@ export default {
         deleteItem: null
     },
     onclick: function () {
-        this.num += 1
         this.name = this.$t('strings.contact') + this.num
         this.$element('showDialog').show();
     },
@@ -40,6 +39,7 @@ export default {
         this.$element('showDialog').close();
     },
     onConfirm: function () {
+        this.num += 1
         this.listItem.push({
             'name': this.name, 'phone': this.phone
         })
diff --git a/UI/JsRouter/entry/src/main/js/default/common/index.css b/UI/JsRouter/entry/src/main/js/default/common/index.css
index 93bfad3f30366ec76a01706a364e1081ae137b91..b3b4c7ef26bc83f61e4674ce754feee5fbe04eba 100644
--- a/UI/JsRouter/entry/src/main/js/default/common/index.css
+++ b/UI/JsRouter/entry/src/main/js/default/common/index.css
@@ -17,6 +17,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 20px;
 }
 
 .title {
diff --git a/UI/JsTimer/entry/src/main/js/default/pages/index/index.css b/UI/JsTimer/entry/src/main/js/default/pages/index/index.css
index f1e4221778765cff445ebcb72ccbcb569266bdd6..e7d1300693726411b14ff2db187449f7c721ceb4 100644
--- a/UI/JsTimer/entry/src/main/js/default/pages/index/index.css
+++ b/UI/JsTimer/entry/src/main/js/default/pages/index/index.css
@@ -48,5 +48,5 @@
     width: 60%;
     height: 48px;
     font-size: 16px;
-    margin-top: 20px;
+    margin-top: 15px;
 }
\ No newline at end of file
diff --git a/UI/Slider/entry/src/main/js/default/pages/index/index.css b/UI/Slider/entry/src/main/js/default/pages/index/index.css
index 3e0c52bedc24ef43c8db6f9f14a562f30c0925f5..b2310eda57023536278687d8b71ef4fd0850c713 100644
--- a/UI/Slider/entry/src/main/js/default/pages/index/index.css
+++ b/UI/Slider/entry/src/main/js/default/pages/index/index.css
@@ -16,6 +16,7 @@
 .container {
     flex-direction: column;
     margin-top: 20%;
+    width: 100%;
 }
 
 .title {
@@ -29,7 +30,7 @@
 .text-c {
     color: #000000;
     padding: 10px;
-    max-width: 300px;
+    max-width: 100%;
     border-radius: 10px;
     background-color: lightgray;
 }
@@ -57,7 +58,7 @@
 
 .slider-div {
     padding: 10px;
-    margin-top: 100px;
+    margin-top: 50px;
     flex-direction: row;
     justify-content: space-around;
 }
diff --git a/UI/Stack/entry/src/main/js/default/pages/index/index.css b/UI/Stack/entry/src/main/js/default/pages/index/index.css
index 48629a8b0f75a4bb182e2234ea3b3a4b96eb33f8..dbd1b1f3e8bc60ec579deb6c9efe0d277a902a21 100644
--- a/UI/Stack/entry/src/main/js/default/pages/index/index.css
+++ b/UI/Stack/entry/src/main/js/default/pages/index/index.css
@@ -21,7 +21,7 @@
 
 .stack {
     width: 100%;
-    height: 60%;
+    height: 400px;
     display: flex;
     align-content: center;
     justify-content: center;
@@ -29,27 +29,27 @@
 
 .box-green {
     width: 55%;
-    height: 300px;
+    height: 250px;
     margin-top: 75px;
     background-color: #DAF7A6;
 }
 
 .box-yellow {
     width: 70%;
-    height: 350px;
+    height: 300px;
     margin-top: 50px;
     background-color:  #FFC300;
 }
 
 .box-origin {
     width: 85%;
-    height: 400px;
+    height: 350px;
     margin-top: 25px;
     background-color: #FF5733;
 }
 
 .box-red {
     width: 100%;
-    height: 450px;
+    height: 400px;
     background-color: #C70039;
 }
diff --git a/UI/Swiper/entry/src/main/js/default/pages/index/index.css b/UI/Swiper/entry/src/main/js/default/pages/index/index.css
index a52586d11bd66460390ba435771553c1c06492c4..fbf19454936e1fa2cca604fe1c2408e14dfec822 100644
--- a/UI/Swiper/entry/src/main/js/default/pages/index/index.css
+++ b/UI/Swiper/entry/src/main/js/default/pages/index/index.css
@@ -17,27 +17,31 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    height: 100%;
 }
 
 .swiper {
-    height: 250px;
+    height: 60%;
     indicator-size: 8px;
     indicator-color: lemonchiffon;
     align-content: center;
 }
 
 .divbutton {
-    height: 40px;
+    height: 90px;
     justify-content: space-around;
 }
 
 .button {
-    width: 100px;
-    height: 40px;
-    font-size: 16px;
+    width: 150px;
+    height: 90px;
+    font-size: 30px;
+    margin: 10px;
 }
 
 .image {
     width: 100%;
-    height: 200px;
+    height: 100%;
+    object-fit: cover;
 }
diff --git a/UI/Swiper/entry/src/main/js/default/pages/index/index.hml b/UI/Swiper/entry/src/main/js/default/pages/index/index.hml
index 6fa44f1d095e0e6b96c657b2368fb4e99ba9ee49..df2a97c7c03c6384288333d0be867caf5858b644 100644
--- a/UI/Swiper/entry/src/main/js/default/pages/index/index.hml
+++ b/UI/Swiper/entry/src/main/js/default/pages/index/index.hml
@@ -15,15 +15,9 @@
 
 <div class="container">
     <swiper class="swiper" id="swiper" index="0" duration="2000" autoplay="false" loop="true" indicator="true">
-        <div class="swiperContent">
             <image src="common/images/1.jpg" class="image"></image>
-        </div>
-        <div class="swiperContent">
             <image src="common/images/2.jpg" class="image"></image>
-        </div>
-        <div class="swiperContent">
             <image src="common/images/3.jpg" class="image"></image>
-        </div>
     </swiper>
     <div class="divbutton">
         <button class="button" onclick="showPrevious">{{ $t('strings.showPrevious') }}</button>
diff --git a/UI/Tabs/entry/src/main/js/default/pages/index/index.css b/UI/Tabs/entry/src/main/js/default/pages/index/index.css
index ad06691cc1e60c0259bc073e66a8f0b630fa6be4..f29242e574d2f18a86a5c129dae16eb614af5232 100644
--- a/UI/Tabs/entry/src/main/js/default/pages/index/index.css
+++ b/UI/Tabs/entry/src/main/js/default/pages/index/index.css
@@ -17,6 +17,8 @@
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
+    width: 100%;
+    height: 100%;
 }
 
 .tabs {
@@ -26,7 +28,7 @@
 
 .tab-content{
     width: 100%;
-    height: 90%;
+    height: 100%;
 }
 
 .item-content {
@@ -88,6 +90,7 @@
 
 .dynamic-item {
     height: 56px;
+    width: 100%;
     margin-right: 12px;
     margin-left: 12px;
     margin-bottom: 8px;
@@ -110,7 +113,7 @@
 
 .tab-bar {
     width: 100%;
-    height: 56px;
+    height: 67px;
     flex-direction: row;
     background-color: white;
 }
diff --git a/UI/chart/entry/src/main/js/default/common/common.css b/UI/chart/entry/src/main/js/default/common/common.css
index d7ebf4fc67eddf49e151b8f843d089be856bbb94..424291cdaa755a8d5bc83652b95af4d1103d0426 100644
--- a/UI/chart/entry/src/main/js/default/common/common.css
+++ b/UI/chart/entry/src/main/js/default/common/common.css
@@ -14,6 +14,8 @@
  */
 
 .container {
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
diff --git a/UI/chart/entry/src/main/js/default/pages/bar/index.css b/UI/chart/entry/src/main/js/default/pages/bar/index.css
index db41b9c9ee5723ef6224dd21a319887b39c7bb21..00e94fc6c57c9cee569466a4e6a996175cbb6dcb 100644
--- a/UI/chart/entry/src/main/js/default/pages/bar/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/bar/index.css
@@ -16,6 +16,6 @@
  @import '../../common/common.css';
 
 .data-bar {
-    width: 700px;
-    height: 400px;
+    width: 95%;
+    height: 90%;
 }
\ No newline at end of file
diff --git a/UI/chart/entry/src/main/js/default/pages/guage/index.css b/UI/chart/entry/src/main/js/default/pages/guage/index.css
index 927ace6005b8bc6e156eedd4b7654d830a5fdef0..3bc11f6e4c35c604965f5557ce377512c2e3eb3b 100644
--- a/UI/chart/entry/src/main/js/default/pages/guage/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/guage/index.css
@@ -18,6 +18,7 @@
 .gauge-region {
     height: 200px;
     width: 200px;
+    align-items: center;
 }
 
 .data-gauge {
diff --git a/UI/chart/entry/src/main/js/default/pages/index/index.css b/UI/chart/entry/src/main/js/default/pages/index/index.css
index 26ec5fd5a17e4a8c2ffc6e69b72655f78a61ed3e..87c5bc290ecb23de40139e6de72df6221b2576a1 100644
--- a/UI/chart/entry/src/main/js/default/pages/index/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/index/index.css
@@ -13,11 +13,12 @@
  * limitations under the License.
  */
 
- @import '../../common/common.css';
+@import '../../common/common.css';
 
 .btn {
     width: 70%;
-    height: 48px;
-    font-size: 16px;
-    margin-top: 20px;
+    height: 80px;
+    font-size: 18px;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/UI/chart/entry/src/main/js/default/pages/line/index.css b/UI/chart/entry/src/main/js/default/pages/line/index.css
index a6fb1b30620069e3f913c849eb2751068fcb2c6c..33b306ad5cc3af1a6badf840226b17011a15582d 100644
--- a/UI/chart/entry/src/main/js/default/pages/line/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/line/index.css
@@ -16,6 +16,6 @@
  @import '../../common/common.css';
 
 .chart-data {
-    width: 700px;
-    height: 600px;
+    width: 100%;
+    height: 90%;
 }
\ No newline at end of file
diff --git a/UI/chart/entry/src/main/js/default/pages/line/index.js b/UI/chart/entry/src/main/js/default/pages/line/index.js
index 42147762e509d4d54c7542a8604f4ef8ca8ad484..79f26436fb3dd1b7e9b33bc4739f07452f0c3ae9 100644
--- a/UI/chart/entry/src/main/js/default/pages/line/index.js
+++ b/UI/chart/entry/src/main/js/default/pages/line/index.js
@@ -27,8 +27,8 @@ export default {
                         textColor: '#000000'
                     },
                     {
-                        value: 15,
-                        description: "15",
+                        value: 20,
+                        description: "20",
                         textLocation: "bottom",
                         textColor: '#000000'
                     },
@@ -51,8 +51,8 @@ export default {
                         textColor: '#000000'
                     },
                     {
-                        value: 83,
-                        description: "83",
+                        value: 80,
+                        description: "80",
                         textLocation: "top",
                         textColor: '#000000'
                     },
@@ -75,8 +75,8 @@ export default {
                         textColor: '#000000'
                     },
                     {
-                        value: 99,
-                        description: "99",
+                        value: 81,
+                        description: "81",
                         textLocation: "top",
                         textColor: '#000000'
                     },
@@ -99,7 +99,7 @@ export default {
             },
             series: {
                 lineStyle: {
-                    width: "5px",
+                    width: "3px",
                     smooth: true,
                 },
                 headPoint: {
diff --git a/UI/chart/entry/src/main/js/default/pages/loading/index.css b/UI/chart/entry/src/main/js/default/pages/loading/index.css
index 5f0bdf713ce9e2cd65c6ccc978a299246f985afd..e0928b14fb9036b2b2a604fcaf58737ba4d6e798 100644
--- a/UI/chart/entry/src/main/js/default/pages/loading/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/loading/index.css
@@ -15,11 +15,6 @@
 
  @import '../../common/common.css';
 
-.chart-region {
-    height: 400px;
-    width: 700px;
-}
-
 .chart-data {
     width: 200px;
     height: 200px;
diff --git a/UI/chart/entry/src/main/js/default/pages/progress/index.css b/UI/chart/entry/src/main/js/default/pages/progress/index.css
index 5f0bdf713ce9e2cd65c6ccc978a299246f985afd..e0928b14fb9036b2b2a604fcaf58737ba4d6e798 100644
--- a/UI/chart/entry/src/main/js/default/pages/progress/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/progress/index.css
@@ -15,11 +15,6 @@
 
  @import '../../common/common.css';
 
-.chart-region {
-    height: 400px;
-    width: 700px;
-}
-
 .chart-data {
     width: 200px;
     height: 200px;
diff --git a/UI/chart/entry/src/main/js/default/pages/rainbow/index.css b/UI/chart/entry/src/main/js/default/pages/rainbow/index.css
index 8458dccd42c2914d9dc0d2caef8ca47d1227f645..38ddf4a81ab4af1ef8f68a6e024bf7831473bc43 100644
--- a/UI/chart/entry/src/main/js/default/pages/rainbow/index.css
+++ b/UI/chart/entry/src/main/js/default/pages/rainbow/index.css
@@ -16,16 +16,15 @@
  @import '../../common/common.css';
 
 .chart-data {
-    width: 200px;
-    height: 200px;
+    width: 170px;
+    height: 170px;
 }
 
 .box {
     flex-direction: column;
-    height: 200px;
+    height: 250px;
     width: 100%;
-    margin-top: 20px;
-    align-content: center;
+    align-items: center;
     justify-content: center;
 }
 
diff --git a/common/DistributeCalc/entry/src/main/js/default/common/calculator.js b/common/DistributeCalc/entry/src/main/js/default/common/calculator.js
index 29a1dff5a101bf7f07adf1d6f7883bf632945568..fb1308d5051b3387d7a610ccefc6472f8abd02df 100644
--- a/common/DistributeCalc/entry/src/main/js/default/common/calculator.js
+++ b/common/DistributeCalc/entry/src/main/js/default/common/calculator.js
@@ -47,7 +47,7 @@ function getFloatNum(one, other, oprate) {
         num = num1 + num2;
     }
     if (oprate === '/') {
-        num = num1 + s2.length;
+        num = (num1 + s2.length) > 3 ? (num1 + s2.length) : 3;
     }
     return num;
 }
diff --git a/common/DistributeCalc/entry/src/main/js/default/pages/index/index.js b/common/DistributeCalc/entry/src/main/js/default/pages/index/index.js
index ee9751eb6ec7f1047e32c40ea73876a135978b45..600aa4d9a76d983e933ef975ce051cb01d41b735 100644
--- a/common/DistributeCalc/entry/src/main/js/default/pages/index/index.js
+++ b/common/DistributeCalc/entry/src/main/js/default/pages/index/index.js
@@ -224,7 +224,7 @@ export default {
             if (pressedEqual) {
                 pressedEqual = false;
             }
-            this.expression = value;
+            this.expression += value;
         }
 
     },