app style

86 files changed, 5388 insertions, 49 deletions

diff --git a/src/app/app.less b/src/app/app.less
index e69de29..795b93b 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -0,0 +1,83 @@
+@import 'style/weui.less';
+
+page {
+    height: 100%;
+}
+.page{
+    min-height: 100%;
+    background-color: var(--weui-BG-0);
+    color: var(--weui-FG-0);
+    font-size: 16px;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}
+image {
+    max-width: 100%;
+    max-height: 100%;
+}
+.link {
+    display: inline;
+    color: var(--weui-LINK);
+}
+.fadeIn {
+    animation: fadeIn 0.3s forwards;
+}
+.fadeOut {
+    animation: fadeOut 0.3s forwards;
+}
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+.weui-msg__extra-area {
+    position: static;
+}
+.page__hd {
+    padding: 40px;
+}
+.page__bd {
+    padding-bottom: 40px;
+}
+.page__bd_spacing {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.page__ft {
+    padding-top: 40px;
+    padding-bottom: 10px;
+    padding-bottom: calc(10px ~"+ constant(safe-area-inset-bottom)");
+    padding-bottom: calc(10px ~"+ env(safe-area-inset-bottom)");
+    text-align: center;
+    image {
+        .dark({
+            filter: invert(100) hue-rotate(180deg);
+        });
+    }
+}
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.page__desc {
+    margin-top: 5px;
+    color: var(--weui-FG-1);
+    text-align: left;
+    font-size: 14px;
+}
+.weui-cell_example:before{
+    left:52px;
+}
diff --git a/src/app/style/base/fn.less b/src/app/style/base/fn.less
new file mode 100644
index 0000000..0c11e1f
--- /dev/null
+++ b/src/app/style/base/fn.less
@@ -0,0 +1,37 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+// theme
+@import "./theme/index";
+
+// mixin
+@import "./mixin/mobile";
+@import "./mixin/setOnepx";
+@import "./mixin/setArrow";
+@import "./mixin/setLoading";
+@import "./mixin/text";
+
+
+// variable
+@import "./variable/global";
+@import "./variable/color";
+@import "./variable/weui-tab";
+@import "./variable/weui-cell";
+@import "./variable/weui-button";
+@import "./variable/weui-msg";
+@import "./variable/weui-grid";
+@import "./variable/weui-progress";
+@import "./variable/weui-dialog";
diff --git a/src/app/style/base/mixin/mobile.less b/src/app/style/base/mixin/mobile.less
new file mode 100644
index 0000000..bf6e790
--- /dev/null
+++ b/src/app/style/base/mixin/mobile.less
@@ -0,0 +1,23 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+.setTapColor(@c:rgba(0,0,0,0)) {
+    -webkit-tap-highlight-color: @c;
+}
+
+
+
+
diff --git a/src/app/style/base/mixin/setArrow.less b/src/app/style/base/mixin/setArrow.less
new file mode 100644
index 0000000..6a3ca93
--- /dev/null
+++ b/src/app/style/base/mixin/setArrow.less
@@ -0,0 +1,54 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+._setArrow(@arrowsize, @borderColor, @borderWidth) {
+    display: inline-block;
+    height: @arrowsize;
+    width: @arrowsize;
+    border-width: @borderWidth @borderWidth 0 0;
+    border-color: @borderColor;
+    border-style: solid;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+
+    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+
+    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
+    position: relative;
+    top: -2px;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+
+    transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
+    position: relative;
+    top: -3px;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+
+    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
+    position: relative;
+    top: -2px;
+}
diff --git a/src/app/style/base/mixin/setLoading.less b/src/app/style/base/mixin/setLoading.less
new file mode 100644
index 0000000..efdfe03
--- /dev/null
+++ b/src/app/style/base/mixin/setLoading.less
@@ -0,0 +1,34 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+.setWeuiPrimaryLoading(@size:20px){
+  width:@size;
+  height:@size;
+  &:before,&:after{
+    content:"";
+    display:block;
+    width:@size / 2;
+    height:@size;
+  }
+  &:before{
+    border-top-left-radius:@size;
+    border-bottom-left-radius:@size;
+  }
+  &:after{
+    border-top-right-radius:@size;
+    border-bottom-right-radius:@size;
+  }
+}
diff --git a/src/app/style/base/mixin/setOnepx.less b/src/app/style/base/mixin/setOnepx.less
new file mode 100644
index 0000000..42339bc
--- /dev/null
+++ b/src/app/style/base/mixin/setOnepx.less
@@ -0,0 +1,69 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../variable/color";
+
+.setTopLine(@c: @weuiLineColorLight) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid @c;
+    color: @c;
+    transform-origin: 0 0;
+    transform: scaleY(0.5);
+}
+
+.setBottomLine(@c: @weuiLineColorLight) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    border-bottom: 1px solid @c;
+    color: @c;
+    transform-origin: 0 100%;
+    transform: scaleY(0.5);
+}
+
+.setLeftLine(@c: @weuiLineColorLight) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1px;
+    bottom: 0;
+    border-left: 1px solid @c;
+    color: @c;
+    transform-origin: 0 0;
+    transform: scaleX(0.5);
+}
+
+.setRightLine(@c: @weuiLineColorLight) {
+    content: " ";
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 1px;
+    bottom: 0;
+    border-right: 1px solid @c;
+    color: @c;
+    transform-origin: 100% 0;
+    transform: scaleX(0.5);
+}
diff --git a/src/app/style/base/mixin/text.less b/src/app/style/base/mixin/text.less
new file mode 100644
index 0000000..58c91a4
--- /dev/null
+++ b/src/app/style/base/mixin/text.less
@@ -0,0 +1,40 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+.ellipsis(@w:auto) {
+    width: @w;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+}
+
+.ellipsisLn(@line) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @line;
+}
+.text_wrap() {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+.hyphens() {
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
diff --git a/src/app/style/base/patch.less b/src/app/style/base/patch.less
new file mode 100644
index 0000000..7b84567
--- /dev/null
+++ b/src/app/style/base/patch.less
@@ -0,0 +1,24 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "patch/weui-dot-loading.less";
+@import "patch/weui-slideview.less";
+@import "patch/weui-navigation-bar.less";
+@import "patch/weui-uploader.less";
+@import "patch/weui-gallery.less";
+@import "patch/weui-searchbar.less";
+@import "patch/weui-loadmore.less";
+@import "patch/weui-form.less";
diff --git a/src/app/style/base/patch/weui-dot-loading.less b/src/app/style/base/patch/weui-dot-loading.less
new file mode 100755
index 0000000..84f32e6
--- /dev/null
+++ b/src/app/style/base/patch/weui-dot-loading.less
@@ -0,0 +1,88 @@
+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+.wx_dot_loading,.wx_dot_loading:before,.wx_dot_loading:after{
+    display:inline-block;vertical-align:middle;width:6px;height:6px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(0,0,0,.3);
+    font-size:0;
+    animation: dot2 1.6s step-start infinite;
+}
+.wx_dot_loading{
+    position:relative;
+    &:before{
+      content:"";
+      position:absolute;
+      left:-12px;
+      background-color:rgba(0,0,0,.1);
+      animation: dot1 1.6s step-start infinite;
+    }
+    &:after{
+      content:"";
+      position:absolute;
+      right:-12px;
+      background-color:rgba(0,0,0,.5);
+      animation: dot3 1.6s step-start infinite;
+    }
+}
+
+@keyframes dot1 {
+  0%,100%{background-color:rgba(0,0,0,.1);}
+  30%{background-color:rgba(0,0,0,.5);}
+  60%{background-color:rgba(0,0,0,.3);}
+}
+@keyframes dot2 {
+  0%,100%{background-color:rgba(0,0,0,.3);}
+  30%{background-color:rgba(0,0,0,.1);}
+  60%{background-color:rgba(0,0,0,.5);}
+}
+@keyframes dot3 {
+  0%,100%{background-color:rgba(0,0,0,.5);}
+  30%{background-color:rgba(0,0,0,.3);}
+  60%{background-color:rgba(0,0,0,.1);}
+}
+.wx_dot_loading_white{
+  background-color:rgba(255,255,255,.3);
+  animation: dotw2 1.6s step-start infinite;
+  &:before{
+    background-color:rgba(255,255,255,.5);
+    animation: dotw1 1.6s step-start infinite;
+  }
+  &:after{
+    background-color:rgba(255,255,255,.1);
+    animation: dotw3 1.6s step-start infinite;
+  }
+}
+@keyframes dotw1 {
+  0%,100%{background-color:rgba(255,255,255,.5);}
+  30%{background-color:rgba(255,255,255,.1);}
+  60%{background-color:rgba(255,255,255,.3);}
+}
+@keyframes dotw2 {
+  0%,100%{background-color:rgba(255,255,255,.3);}
+  30%{background-color:rgba(255,255,255,.5);}
+  60%{background-color:rgba(255,255,255,.1);}
+}
+@keyframes dotw3 {
+  0%,100%{background-color:rgba(255,255,255,.1);}
+  30%{background-color:rgba(255,255,255,.3);}
+  60%{background-color:rgba(255,255,255,.5);}
+}
diff --git a/src/app/style/base/patch/weui-form.less b/src/app/style/base/patch/weui-form.less
new file mode 100644
index 0000000..8e5f385
--- /dev/null
+++ b/src/app/style/base/patch/weui-form.less
@@ -0,0 +1,22 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+
+.weui-btn_input-clear {
+    display: block;
+}
\ No newline at end of file
diff --git a/src/app/style/base/patch/weui-gallery.less b/src/app/style/base/patch/weui-gallery.less
new file mode 100644
index 0000000..d49b5f9
--- /dev/null
+++ b/src/app/style/base/patch/weui-gallery.less
@@ -0,0 +1,46 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+@weuiGalleryInfoHeight: 60px;
+.weui-gallery {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+.weui-gallery__info{
+    color:#FFFFFF;
+    font-size:17px;
+    line-height: @weuiGalleryInfoHeight;
+    min-height: @weuiGalleryInfoHeight;
+    text-align: center;
+}
+.weui-gallery__img__wrp {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    position:relative;
+    font-size:0;
+}
+.weui-gallery__img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+.weui-gallery__opr {
+    position: static;
+}
\ No newline at end of file
diff --git a/src/app/style/base/patch/weui-loadmore.less b/src/app/style/base/patch/weui-loadmore.less
new file mode 100644
index 0000000..521abd1
--- /dev/null
+++ b/src/app/style/base/patch/weui-loadmore.less
@@ -0,0 +1,23 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+.weui-loadmore {
+    .weui-loading {
+        margin-right: 0.3em;
+    }
+}
\ No newline at end of file
diff --git a/src/app/style/base/patch/weui-navigation-bar.less b/src/app/style/base/patch/weui-navigation-bar.less
new file mode 100755
index 0000000..6adb8cd
--- /dev/null
+++ b/src/app/style/base/patch/weui-navigation-bar.less
@@ -0,0 +1,109 @@
+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+
+page {
+    --height: 44px;
+    --right: 190rpx;
+}
+
+
+.weui-navigation-bar {
+    overflow: hidden;
+    color: var(--weui-FG-0);
+
+    .android {
+        --height: 48px;
+        --right: 222rpx;
+    }
+
+}
+
+.weui-navigation-bar__inner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5001;
+    height: var(--height);
+    display: flex;
+    align-items: center;
+    padding-right: var(--right);
+    width: calc(100% ~"- var(--right)");
+
+    .weui-navigation-bar__left {
+        position: relative;
+        width: var(--right);
+        padding-left: 16px;
+        display: flex;
+        align-items: center;
+
+        .weui-navigation-bar__btn {
+            display: inline-block;
+            vertical-align: middle;
+            background-repeat: no-repeat;
+        }
+
+        .weui-navigation-bar__btn_goback {
+            font-size: 12px;
+            width: 1em;
+            height: 2em;
+            mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+            mask-size: cover;
+            background-color: currentColor;
+
+            &:active {
+                opacity: .5;
+            }
+        }
+    }
+
+    .weui-navigation-bar__center {
+        font-size: 17px;
+        text-align: center;
+        position: relative;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .weui-navigation-bar__loading {
+        margin-right: 4px;
+        font-size: 0;
+
+        .weui-loading {
+            margin-left: 0;
+        }
+    }
+
+    .weui-navigation-bar__right {
+        margin-right: 16px;
+    }
+}
+
+.weui-navigation-bar__placeholder {
+    height: var(--height);
+    background: var(--weui-BG-1);
+    position: relative;
+    z-index: 50;
+}
+
+
diff --git a/src/app/style/base/patch/weui-searchbar.less b/src/app/style/base/patch/weui-searchbar.less
new file mode 100644
index 0000000..d71b16d
--- /dev/null
+++ b/src/app/style/base/patch/weui-searchbar.less
@@ -0,0 +1,29 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+.weui-search-bar {
+    .weui-search-bar__box {
+        .weui-search-bar__input {
+            height: inherit;
+            line-height: inherit;
+        }
+        .weui-icon-clear {
+            display: block;
+        }
+    } 
+}
diff --git a/src/app/style/base/patch/weui-slideview.less b/src/app/style/base/patch/weui-slideview.less
new file mode 100755
index 0000000..cb0d794
--- /dev/null
+++ b/src/app/style/base/patch/weui-slideview.less
@@ -0,0 +1,121 @@
+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+:host {
+  width: 100%;
+}
+.weui-slideview{
+  position: relative;
+  overflow: hidden;
+}
+
+.weui-slideview__left {
+  position: relative;
+  z-index: 10;
+}
+
+.weui-slideview__right {
+  position: absolute;
+  z-index: 1;
+  left: 100%;
+  top: 0;
+  height: 100%;
+}
+.weui-slideview__btn__wrp {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  text-align: center;
+  min-width:69px;
+  height: 100%;
+  white-space:nowrap;
+
+
+}
+.weui-slideview__btn {
+  color:#FFFFFF;
+  padding: 0 17px;
+}
+.weui-slideview__btn-group_default{
+  .weui-slideview__btn {
+    background: #C7C7CC;
+    .dark({background: var(--weui-BG-4)});
+  }
+  &~&{
+    &:before{
+      .setLeftLine(#FFFFFF);
+      .dark({border-left-color: var(--weui-FG-3)});
+    }
+  }
+  &:first-child{
+    &:before{
+      display:none;
+    }
+  }
+}
+.weui-slideview__btn-group_warn{
+  .weui-slideview__btn {
+    background: #FE3B30;
+  }
+  &~&{
+    &:before{
+      .setLeftLine(#FFFFFF);
+    }
+  }
+  &:first-child{
+    &:before{
+      display:none;
+    }
+  }
+}
+
+.weui-slideview_icon{
+  .weui-slideview__btn__wrp{
+    background: transparent;
+    font-size:0;
+    &:first-child{
+      padding-left:16px;
+    }
+    &:last-child{
+      padding-right:8px;
+    }
+  }
+  .weui-slideview__btn{
+    width:48px;
+    height:48px;
+    line-height:48px;
+    padding:0;
+    display:inline-block;
+    vertical-align:middle;
+    border-radius:50%;
+    background-color:#FFFFFF;
+    .dark({
+      background-color: var(--weui-BG-4);
+    });
+  }
+  .weui-slideview__btn__icon{
+    display:inline-block;
+    vertical-align:middle;
+    width:22px;
+    height:22px;
+  }
+}
diff --git a/src/app/style/base/patch/weui-uploader.less b/src/app/style/base/patch/weui-uploader.less
new file mode 100644
index 0000000..25b4f11
--- /dev/null
+++ b/src/app/style/base/patch/weui-uploader.less
@@ -0,0 +1,40 @@
+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../fn.less";
+
+.weui-uploader__hd {
+    display: block;
+}
+.weui-uploader__overview{
+    display: flex;
+    align-items: center;
+}
+.weui-uploader__tips{
+    color: @weuiTextColorTips;
+    font-size: 14px;
+    line-height: 1.4;
+    padding-top: 4px;
+}
+.weui-uploader__img{
+    display: block;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/app/style/base/reset.less b/src/app/style/base/reset.less
new file mode 100755
index 0000000..5829caa
--- /dev/null
+++ b/src/app/style/base/reset.less
@@ -0,0 +1,30 @@
+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "fn.less";
+
+page {
+    line-height: 1.6;
+    font-family: @weuiFontDefault;
+}
+
+icon{
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/src/app/style/base/theme/fn.less b/src/app/style/base/theme/fn.less
new file mode 100644
index 0000000..aa4540d
--- /dev/null
+++ b/src/app/style/base/theme/fn.less
@@ -0,0 +1,29 @@
+@import 'vars/light';
+@import 'vars/dark';
+
+.dark(@rule) {
+    [data-weui-theme='dark'] & {
+        @rule();
+    }
+}
+
+.setColor(@var, @color) {
+    .setColor(@var, @color, @color);
+}
+
+.setColor(@var, @light, @dark) {
+    ._setColor({
+        @{var}: @light;
+    }, {
+        @{var}: @dark;
+    });
+}
+._setColor(@lightRule, @darkRule) {
+    page,
+    [data-weui-theme='light'] {
+        @lightRule();
+    }
+    [data-weui-theme='dark'] {
+        @darkRule();
+    }
+}
\ No newline at end of file
diff --git a/src/app/style/base/theme/index.less b/src/app/style/base/theme/index.less
new file mode 100644
index 0000000..2f2d29c
--- /dev/null
+++ b/src/app/style/base/theme/index.less
@@ -0,0 +1,10 @@
+@import 'fn';
+
+page,
+[data-weui-theme='light'] {
+    .varsLight();
+}
+
+[data-weui-theme='dark'] {
+    .varsDark();
+}
diff --git a/src/app/style/base/theme/vars/dark.less b/src/app/style/base/theme/vars/dark.less
new file mode 100644
index 0000000..ce17d52
--- /dev/null
+++ b/src/app/style/base/theme/vars/dark.less
@@ -0,0 +1,35 @@
+.varsDark() {
+    --weui-BG-0: #111111;
+    --weui-BG-1: #1e1e1e;
+    --weui-BG-2: #191919;
+    --weui-BG-3: #202020;
+    --weui-BG-4: #404040;
+    --weui-BG-5: #2c2c2c;
+    --weui-FG-0: rgba(255, 255, 255, 0.8);
+    --weui-FG-HALF: rgba(255, 255, 255, 0.6);
+    --weui-FG-1: rgba(255, 255, 255, 0.5);
+    --weui-FG-2: rgba(255, 255, 255, 0.3);
+    --weui-FG-3: rgba(255, 255, 255, 0.05);
+    --weui-RED: #fa5151;
+    --weui-ORANGE: #c87d2f;
+    --weui-YELLOW: #cc9c00;
+    --weui-GREEN: #74a800;
+    --weui-LIGHTGREEN: #3eb575;
+    --weui-BRAND: #07c160;
+    --weui-BLUE: #10aeff;
+    --weui-INDIGO: #1196ff;
+    --weui-PURPLE: #8183ff;
+    --weui-WHITE: rgba(255, 255, 255, 0.8);
+    --weui-LINK: #7d90a9;
+    --weui-TEXTGREEN: #259c5c;
+    --weui-FG: white;
+    --weui-BG: black;
+    --weui-TAG-TEXT-ORANGE: rgba(250, 157, 59, 0.6);
+    --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
+    --weui-TAG-TEXT-GREEN: rgba(6, 174, 86, 0.6);
+    --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+    --weui-TAG-TEXT-BLUE: rgba(16, 174, 255, 0.6);
+    --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
+    --weui-TAG-TEXT-BLACK: rgba(255, 255, 255, 0.5);
+    --weui-TAG-BACKGROUND-BLACK: rgba(255, 255, 255, 0.05);
+};
diff --git a/src/app/style/base/theme/vars/light.less b/src/app/style/base/theme/vars/light.less
new file mode 100644
index 0000000..35c75e7
--- /dev/null
+++ b/src/app/style/base/theme/vars/light.less
@@ -0,0 +1,35 @@
+.varsLight() {
+    --weui-BG-0: #ededed;
+    --weui-BG-1: #f7f7f7;
+    --weui-BG-2: #fff;
+    --weui-BG-3: #f7f7f7;
+    --weui-BG-4: #4c4c4c;
+    --weui-BG-5: #fff;
+    --weui-FG-0: rgba(0, 0, 0, 0.9);
+    --weui-FG-HALF: rgba(0, 0, 0, 0.9);
+    --weui-FG-1: rgba(0, 0, 0, 0.5);
+    --weui-FG-2: rgba(0, 0, 0, 0.3);
+    --weui-FG-3: rgba(0, 0, 0, 0.1);
+    --weui-RED: #fa5151;
+    --weui-ORANGE: #fa9d3b;
+    --weui-YELLOW: #ffc300;
+    --weui-GREEN: #91d300;
+    --weui-LIGHTGREEN: #95ec69;
+    --weui-BRAND: #07c160;
+    --weui-BLUE: #10aeff;
+    --weui-INDIGO: #1485ee;
+    --weui-PURPLE: #6467f0;
+    --weui-WHITE: #fff;
+    --weui-LINK: #576b95;
+    --weui-TEXTGREEN: #06ae56;
+    --weui-FG: black;
+    --weui-BG: white;
+    --weui-TAG-TEXT-ORANGE: #fa9d3b;
+    --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
+    --weui-TAG-TEXT-GREEN: #06ae56;
+    --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
+    --weui-TAG-TEXT-BLUE: #10aeff;
+    --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
+    --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
+    --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
+}
diff --git a/src/app/style/base/variable/color.less b/src/app/style/base/variable/color.less
new file mode 100644
index 0000000..ac9713d
--- /dev/null
+++ b/src/app/style/base/variable/color.less
@@ -0,0 +1,48 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../theme/index";
+
+.setColor(--weui-BG-COLOR-ACTIVE, #ececec, overlay(rgba(255, 255, 255, 0.05), #2c2c2c));
+
+// color
+@weuiColorPrimary: var(--weui-BRAND);
+@weuiColorWarn: var(--weui-RED);
+
+// active mask
+@weuiActiveMaskBlack: rgba(0, 0, 0, 0.15);
+
+// link
+@weuiLinkColorDefault: var(--weui-LINK);
+
+// background
+@weuiBgColorDefault: var(--weui-BG-0);
+@weuiBgColorPrimary: var(--weui-BG-1);
+@weuiBgColorActive: var(--weui-BG-COLOR-ACTIVE);
+
+// line
+@weuiLineColorLight: var(--weui-FG-3);
+@weuiLineColorDark: var(--weui-FG-2);
+
+// text
+@weuiTextColorTitle: var(--weui-FG-0);
+@weuiTextColorDesc: var(--weui-FG-1);
+@weuiTextColorTips: var(--weui-FG-2);
+@weuiTextColorWarn: @weuiColorWarn;
+
+
+
+
diff --git a/src/app/style/base/variable/global.less b/src/app/style/base/variable/global.less
new file mode 100644
index 0000000..664a1cf
--- /dev/null
+++ b/src/app/style/base/variable/global.less
@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+// font
+@weuiFontEN: -apple-system-font, "Helvetica Neue";
+@weuiFontCN: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+@weuiFontSans: sans-serif;
+@weuiFontDefault: @weuiFontEN, @weuiFontSans;
diff --git a/src/app/style/base/variable/weui-button.less b/src/app/style/base/variable/weui-button.less
new file mode 100644
index 0000000..9d1d4f1
--- /dev/null
+++ b/src/app/style/base/variable/weui-button.less
@@ -0,0 +1,60 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.setColor(--weui-BTN-DISABLED-FONT-COLOR, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+.setColor(--weui-BTN-DEFAULT-BG, #f2f2f2, rgba(255, 255, 255, 0.08));
+.setColor(--weui-BTN-DEFAULT-COLOR, #06ae56, rgba(255, 255, 255, 0.8));
+.setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.08)));
+
+@weuiBtnWidth: 184px;
+@weuiBtnHeight: 40px;
+@weuiBtnFontSize: 17px;
+@weuiBtnBorderRadius: 4px;
+@weuiBtnDefaultGap: 16px;
+
+@weuiBtnMiniFontSize: 16px;
+@weuiBtnMiniHeight: 32px;
+
+@weuiBtnCellHeight: 56px;
+@weuiBtnCellGap: 16px;
+@weuiBtnCellLineHeight:unit((@weuiBtnCellHeight - 2 * @weuiBtnCellGap) / @weuiBtnFontSize);
+
+@weuiBtnFontColor: #fff;
+@weuiBtnDisabledFontColor: var(--weui-BTN-DISABLED-FONT-COLOR);
+@weuiBtnDisabledBg: var(--weui-BTN-DEFAULT-BG);
+
+// default
+@weuiBtnDefaultFontColor: var(--weui-BTN-DEFAULT-COLOR);
+@weuiBtnDefaultDisabledFontColor: @weuiBtnDisabledFontColor;
+@weuiBtnDefaultBg: var(--weui-BTN-DEFAULT-BG);
+@weuiBtnDefaultActiveBg: var(--weui-BTN-DEFAULT-ACTIVE-BG);
+@weuiBtnDefaultDisabledBg: @weuiBtnDisabledBg;
+
+// primary
+@weuiBtnPrimaryFontColor: @weuiBtnFontColor;
+@weuiBtnPrimaryDisabledFontColor: @weuiBtnDisabledFontColor;
+@weuiBtnPrimaryBg: var(--weui-BRAND);
+@weuiBtnPrimaryActiveBg: var(--weui-TAG-TEXT-GREEN);
+@weuiBtnPrimaryDisabledBg: @weuiBtnDisabledBg;
+
+// warn
+@weuiBtnWarnFontColor: @weuiColorWarn;
+@weuiBtnWarnDisabledFontColor: @weuiBtnDisabledFontColor;
+@weuiBtnWarnBg: @weuiBtnDefaultBg;
+@weuiBtnWarnActiveBg: @weuiBtnDefaultActiveBg;
+@weuiBtnwarnDisabledBg: @weuiBtnDefaultDisabledBg;
diff --git a/src/app/style/base/variable/weui-cell.less b/src/app/style/base/variable/weui-cell.less
new file mode 100644
index 0000000..f5369a1
--- /dev/null
+++ b/src/app/style/base/variable/weui-cell.less
@@ -0,0 +1,39 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@weuiCellBg: var(--weui-BG-2);
+@weuiCellBorderColor: @weuiLineColorLight;
+@weuiCellGapV: 16px;
+@weuiCellGapH: 16px;
+@weuiCellInnerGapH: 16px;
+@weuiCellHeight: 56px;
+@weuiCellFontSize: 17px;
+@weuiCellTipsFontSize: 14px;
+@weuiCellLabelWidth: 105px;
+@weuiCellActiveBg: @weuiBgColorActive;
+
+@weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度减去上下padding的行高
+@weuiCellsMarginTop: 8px;
+
+// weui switch
+@weuiSwitchHeight: 32px;
+
+// weui uploader
+@weuiUploaderFileSpacing: 8px;
+@weuiUploaderSize: 96px;
+@weuiUploaderBorderWidth: 1px;
diff --git a/src/app/style/base/variable/weui-dialog.less b/src/app/style/base/variable/weui-dialog.less
new file mode 100644
index 0000000..cafde4b
--- /dev/null
+++ b/src/app/style/base/variable/weui-dialog.less
@@ -0,0 +1,25 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.setColor(--weui-DIALOG-LINE-COLOR, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+
+@weuiDialogBackgroundColor: var(--weui-BG-2);
+@weuiDialogLineColor: var(--weui-DIALOG-LINE-COLOR);
+@weuiDialogLinkColor: @weuiLinkColorDefault;
+@weuiDialogLinkActiveBc: @weuiBgColorActive;
+@weuiDialogGapWidth: 24px;
diff --git a/src/app/style/base/variable/weui-grid.less b/src/app/style/base/variable/weui-grid.less
new file mode 100644
index 0000000..77c0d77
--- /dev/null
+++ b/src/app/style/base/variable/weui-grid.less
@@ -0,0 +1,22 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@weuiGridBorderColor: var(--weui-FG-3);
+@weuiGridFontSize: 14px;
+@weuiGridIconSize: 28px;
+@weuiGridColumnCount: 3;
diff --git a/src/app/style/base/variable/weui-msg.less b/src/app/style/base/variable/weui-msg.less
new file mode 100644
index 0000000..86e98c6
--- /dev/null
+++ b/src/app/style/base/variable/weui-msg.less
@@ -0,0 +1,18 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+@weuiMsgPaddingTop: 48px;
+@weuiMsgTitleGap: 16px;
diff --git a/src/app/style/base/variable/weui-progress.less b/src/app/style/base/variable/weui-progress.less
new file mode 100644
index 0000000..3f39ffe
--- /dev/null
+++ b/src/app/style/base/variable/weui-progress.less
@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@weuiProgressBg: @weuiBgColorDefault;
+@weuiProgressColor: @weuiColorPrimary;
+@weuiProgressHeight: 3px;
diff --git a/src/app/style/base/variable/weui-tab.less b/src/app/style/base/variable/weui-tab.less
new file mode 100644
index 0000000..ff4c842
--- /dev/null
+++ b/src/app/style/base/variable/weui-tab.less
@@ -0,0 +1,18 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+@weuiNavBarHeight: 56px;
+@weuiTabBarHeight: 60px;
diff --git a/src/app/style/icon/weui-icon.less b/src/app/style/icon/weui-icon.less
new file mode 100644
index 0000000..03b5b64
--- /dev/null
+++ b/src/app/style/icon/weui-icon.less
@@ -0,0 +1,362 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+/* stylelint-disable no-duplicate-selectors */
+
+@import "../base/variable/color";
+
+page {
+    --weui-URL-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-DOWNLOAD: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.25%2012.04l-1.72-1.72-1.06%201.06%202.828%202.83a1%201%200%20001.414-.001l2.828-2.828-1.06-1.061-1.73%201.73V7h-1.5v5.04zm0-5.04V2h1.5v5h6.251c.55%200%20.999.446.999.996v13.008a.998.998%200%2001-.996.996H4.996A.998.998%200%20014%2021.004V7.996A1%201%200%20014.999%207h6.251z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-INFO: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.75-12v7h1.5v-7h-1.5zM12%209a1%201%200%20100-2%201%201%200%20000%202z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SAFE-SUCCESS: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.6C315.5%2046.7%20180.4%2093.1%2057.6%20132c0%20129.3.2%20231.7.2%20339.7%200%20304.2%20248.3%20471.6%20443.1%20523.7C695.7%20943.3%20944%20775.9%20944%20471.7c0-108%20.2-210.4.2-339.7C821.4%2093.1%20686.3%2046.7%20500.9%204.6zm248.3%20349.1l-299.7%20295c-2.1%202-5.3%202-7.4-.1L304.4%20506.1c-2-2.1-2.3-5.7-.6-8l18.3-24.9c1.7-2.3%205-2.8%207.2-1l112.2%2086c2.3%201.8%206%201.7%208.1-.1l274.7-228.9c2.2-1.8%205.7-1.7%207.7.3l17%2016.8c2.2%202.1%202.2%205.3.2%207.4z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23070202%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SAFE-WARN: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20d%3D%22M500.9%204.5c-185.4%2042-320.4%2088.4-443.2%20127.3%200%20129.3.2%20231.7.2%20339.6%200%20304.1%20248.2%20471.4%20443%20523.6%20194.7-52.2%20443-219.5%20443-523.6%200-107.9.2-210.3.2-339.6C821.3%2092.9%20686.2%2046.5%20500.9%204.5zm-26.1%20271.1h52.1c5.8%200%2010.3%204.7%2010.1%2010.4l-11.6%20313.8c-.1%202.8-2.5%205.2-5.4%205.2h-38.2c-2.9%200-5.3-2.3-5.4-5.2L464.8%20286c-.2-5.8%204.3-10.4%2010-10.4zm26.1%20448.3c-20.2%200-36.5-16.3-36.5-36.5s16.3-36.5%2036.5-36.5%2036.5%2016.3%2036.5%2036.5-16.4%2036.5-36.5%2036.5z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23020202%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SUCCESS: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SUCCESS-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm-1.172-6.242l5.809-5.808.848.849-5.95%205.95a1%201%200%2001-1.414%200L7%2012.426l.849-.849%202.98%202.98z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SUCCESS-NO-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-WAITING: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.75%2011.38V6h-1.5v6l4.243%204.243%201.06-1.06-3.803-3.804zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-WAITING-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.6%2011.503l3.891%203.891-.848.849L11.4%2012V6h1.2v5.503zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-WARN: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-INFO-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zM11.4%2010h1.2v7h-1.2v-7zm.6-1a1%201%200%20110-2%201%201%200%20010%202z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-CANCEL: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6z%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M12.849%2012l3.11%203.111-.848.849L12%2012.849l-3.111%203.11-.849-.848L11.151%2012l-3.11-3.111.848-.849L12%2011.151l3.111-3.11.849.848L12.849%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
+    --weui-URL-SEARCH: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.31%2015.561l4.114%204.115-.848.848-4.123-4.123a7%207%200%2011.857-.84zM16.8%2011a5.8%205.8%200%2010-11.6%200%205.8%205.8%200%200011.6%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-CLEAR: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-BACK: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm1.999-6.563L10.68%2012%2014%208.562%2012.953%207.5%209.29%2011.277a1.045%201.045%200%20000%201.446l3.663%203.777L14%2015.437z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-DELETE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.774%206.4l.812%2013.648a.8.8%200%2000.798.752h7.232a.8.8%200%2000.798-.752L17.226%206.4H6.774zm11.655%200l-.817%2013.719A2%202%200%200115.616%2022H8.384a2%202%200%2001-1.996-1.881L5.571%206.4H3.5v-.7a.5.5%200%2001.5-.5h16a.5.5%200%2001.5.5v.7h-2.071zM14%203a.5.5%200%2001.5.5v.7h-5v-.7A.5.5%200%200110%203h4zM9.5%209h1.2l.5%209H10l-.5-9zm3.8%200h1.2l-.5%209h-1.2l.5-9z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SUCCESS-NO-CIRCLE-THIN: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.864%2016.617l-5.303-5.303-1.061%201.06%205.657%205.657a1%201%200%20001.414%200L21.238%206.364l-1.06-1.06L8.864%2016.616z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-ARROW: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-ARROW-BOLD: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.157%2012.711L4.5%2018.368l-1.414-1.414%204.95-4.95-4.95-4.95L4.5%205.64l5.657%205.657a1%201%200%20010%201.414z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-BACK-ARROW: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.343%2012l7.071%207.071L9%2020.485l-7.778-7.778a1%201%200%20010-1.414L9%203.515l1.414%201.414L3.344%2012z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-BACK-ARROW-THIN: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-CLOSE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2010.586l5.657-5.657%201.414%201.414L13.414%2012l5.657%205.657-1.414%201.414L12%2013.414l-5.657%205.657-1.414-1.414L10.586%2012%204.929%206.343%206.343%204.93%2012%2010.586z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-CLOSE-THIN: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-BACK-CIRCLE: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E);
+    --weui-URL-SCAN: url(data:image/svg+xml,%3Csvg%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M693.248%20170.496c-17.92%200-31.744-14.336-31.744-32.256s14.336-31.744%2031.744-31.744h149.504c41.472%200%2074.752%2033.28%2074.752%2074.752v149.504c0%2017.92-14.336%2031.744-31.744%2031.744-17.92%200-31.744-14.336-31.744-31.744V181.248c0-6.144-4.608-10.752-10.752-10.752h-150.016zM853.504%20693.248c0-17.92%2014.336-31.744%2031.744-31.744%2017.92%200%2031.744%2014.336%2031.744%2031.744v149.504c0%2041.472-33.28%2074.752-74.752%2074.752h-149.504c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h149.504c6.144%200%2010.752-4.608%2010.752-10.752v-150.016h0.512zM330.752%20853.504c17.92%200%2031.744%2014.336%2031.744%2031.744%200%2017.92-14.336%2031.744-31.744%2031.744H181.248c-41.472%200-74.752-33.28-74.752-74.752v-149.504c0-17.92%2014.336-31.744%2032.256-31.744%2017.408%200%2031.744%2014.336%2031.744%2031.744v149.504c0%206.144%204.608%2010.752%2010.752%2010.752h149.504zM170.496%20330.752c0%2017.92-14.336%2031.744-32.256%2031.744s-31.744-14.336-31.744-31.744V181.248c0-41.472%2033.28-74.752%2074.752-74.752h149.504c17.92%200%2031.744%2014.336%2031.744%2032.256%200%2017.408-14.336%2031.744-31.744%2031.744H181.248c-6.144%200-10.752%204.608-10.752%2010.752v149.504zM799.744%20480.256c17.92%200%2031.744%2014.336%2031.744%2031.744%200%2017.92-14.336%2031.744-31.744%2031.744H224.256c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h575.488z%22%20fill%3D%22%23101010%22%20p-id%3D%228168%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M330.752%20170.496H138.752c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h192c17.92%200%2031.744%2014.336%2031.744%2031.744%200%2017.408-14.336%2031.744-31.744%2031.744zM330.752%20917.504H138.752c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h192c17.92%200%2031.744%2014.336%2031.744%2031.744%200%2017.408-14.336%2031.744-31.744%2031.744zM885.248%20917.504h-192c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h192c17.92%200%2031.744%2014.336%2031.744%2031.744%200.512%2017.408-13.824%2031.744-31.744%2031.744zM885.248%20170.496h-192c-17.92%200-31.744-14.336-31.744-31.744%200-17.92%2014.336-31.744%2031.744-31.744h192c17.92%200%2031.744%2014.336%2031.744%2031.744%200.512%2017.408-13.824%2031.744-31.744%2031.744z%22%20fill%3D%22%23101010%22%20p-id%3D%228169%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M106.496%20330.752V138.752c0-17.92%2014.336-31.744%2031.744-31.744%2017.92%200%2031.744%2014.336%2031.744%2031.744v192c0%2017.92-14.336%2031.744-31.744%2031.744-17.408%200-31.744-14.336-31.744-31.744zM106.496%20885.248v-192c0-17.92%2014.336-31.744%2031.744-31.744%2017.92%200%2031.744%2014.336%2031.744%2031.744v192c0%2017.92-14.336%2031.744-31.744%2031.744-17.408%200.512-31.744-13.824-31.744-31.744zM853.504%20885.248v-192c0-17.92%2014.336-31.744%2031.744-31.744%2017.92%200%2031.744%2014.336%2031.744%2031.744v192c0%2017.92-14.336%2031.744-31.744%2031.744-17.408%200.512-31.744-13.824-31.744-31.744zM853.504%20330.752V138.752c0-17.92%2014.336-31.744%2031.744-31.744%2017.92%200%2031.744%2014.336%2031.744%2031.744v192c0%2017.92-14.336%2031.744-31.744%2031.744-17.408%200-31.744-14.336-31.744-31.744z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+    --weui-URL-QRCODE: url(data:image/svg+xml,%3Csvg%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M419.2%20160v256h-256V160h256m0-64h-256c-35.2%200-64%2028.8-64%2064v256c0%2035.2%2028.8%2064%2064%2064h256c35.2%200%2064-28.8%2064-64V160c0-35.2-28.8-64-64-64z%20m480%2064v256h-256V160h256m0-64h-256c-35.2%200-64%2028.8-64%2064v256c0%2035.2%2028.8%2064%2064%2064h256c35.2%200%2064-28.8%2064-64V160c0-35.2-28.8-64-64-64z%20m-480%20512v256h-256V608h256m0-64h-256c-35.2%200-64%2028.8-64%2064v256c0%2035.2%2028.8%2064%2064%2064h256c35.2%200%2064-28.8%2064-64V608c0-35.2-28.8-64-64-64z%20m192%20352c-19.2%200-32-12.8-32-32V608c0-19.2%2012.8-32%2032-32s32%2012.8%2032%2032v256c0%2016-16%2032-32%2032z%20m156.8%200c-19.2%200-32-12.8-32-32V608c0-19.2%2012.8-32%2032-32s32%2012.8%2032%2032v256c0%2016-16%2032-32%2032z%20m163.2%200c-19.2%200-32-12.8-32-32V608c0-19.2%2012.8-32%2032-32s32%2012.8%2032%2032v256c0%2016-16%2032-32%2032z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+    --weui-URL-FLASHLIGHT: url(data:image/svg+xml,%3Csvg%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M830.016%20454.24a32%2032%200%200%200-26.112-20.736l-237.216-29.344%2059.136-236.384a31.968%2031.968%200%200%200-54.688-29.312L200.32%20545.28a32%2032%200%200%200%2019.712%2053.312l235.648%2029.28-60.896%20236.32a32.032%2032.032%200%200%200%2054.56%2029.664l374.208-406.944a32%2032%200%200%200%206.464-32.672%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+    --weui-URL-LOCATION: url(data:image/svg+xml,%3Csvg%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M521.841%204.001c-208.765%200-385.596%20177.824-385.596%20388.456%200%20220.577%20204.93%20446.145%20342.779%20604.678%200.529%200.64%2022.799%2025.364%2050.261%2025.364%200.063%200%202.331%200%202.423%200%2027.448%200%2049.578-24.725%2050.137-25.364%20129.366-148.714%20318.287-393.924%20318.287-604.678C900.133%20181.825%20762.219%204.001%20521.841%204.001zM534.633%20954.443c-1.137%201.12-2.735%202.378-4.182%203.39-1.444-1.012-3.062-2.27-4.212-3.39l-16.676-19.146c-130.688-149.928-309.661-355.241-309.661-542.84%200-176.067%20147.426-324.814%20321.937-324.814%20217.348%200%20314.635%20163.122%20314.635%20324.814C836.475%20534.876%20734.93%20723.967%20534.633%20954.443z%22%20fill%3D%22%23272636%22%20p-id%3D%2210797%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M519.324%20196.745c-105.463%200-190.972%2085.507-190.972%20190.972%200%20105.462%2085.508%20190.973%20190.972%20190.973%20105.462%200%20190.971-85.511%20190.971-190.973C710.295%20282.252%20624.786%20196.745%20519.324%20196.745zM519.324%20515.03c-70.201%200-128.777-58.498-128.777-128.712%200-70.201%2057.116-127.314%20127.314-127.314%2070.216%200%20127.313%2057.114%20127.313%20127.314C645.176%20456.532%20589.539%20515.03%20519.324%20515.03z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+    --weui-URL-MOBLE-QRCODE: url(data:image/svg+xml,%3Csvg%20width%3D%221024%22%20height%3D%221024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M755.699348%202.443655%20267.713274%202.443655c0%200-70.074985-1.11745-70.074985%2072.478731l-0.36225%20874.492918c0%200-6.573719%2072.142064%2066.801429%2072.142064l494.874971%200c0%200%2067.912739%201.065262%2067.912739-69.203128L826.865177%2074.921363C826.891783%2074.921363%20829.000817%202.443655%20755.699348%202.443655L755.699348%202.443655%20755.699348%202.443655zM441.423595%2037.630039l140.102898%200%200%2035.082006L441.423595%2072.712045%20441.423595%2037.630039%20441.423595%2037.630039%20441.423595%2037.630039zM388.868635%2037.630039c9.708106%200%2017.541515%207.813966%2017.541515%2017.514909%200%209.708106-7.813966%2017.593703-17.541515%2017.593703-9.658987%200-17.493419-7.861038-17.493419-17.593703C371.395682%2045.444005%20379.209648%2037.630039%20388.868635%2037.630039L388.868635%2037.630039%20388.868635%2037.630039zM511.526209%20951.235766c-19.388583%200-35.034934-15.72003-35.034934-35.135218%200-19.387559%2015.672958-35.154661%2035.034934-35.154661%2019.340487%200%2035.040051%2015.767102%2035.040051%2035.154661C546.56626%20935.515736%20530.865673%20951.235766%20511.526209%20951.235766L511.526209%20951.235766%20511.526209%20951.235766zM758.201331%20810.649867%20264.807085%20810.649867%20264.807085%20107.847264l493.39527%200L758.202355%20810.649867%20758.201331%20810.649867%20758.201331%20810.649867zM758.201331%20810.649867%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M728.061894%20651.28016l-46.697555%200-0.992607%200L632.683617%20651.28016l-47.689139%200%200-47.689139%2047.689139%200%2047.689139%200%200.992607%200%200-47.689139%200-47.689139%2047.689139%200%200%2047.689139%200%2047.689139%200%2047.689139L728.061894%20651.28016%20728.061894%20651.28016zM633.676224%20411.842883l46.696532%200%200.992607%200%2046.697555%200%200%2047.687092-46.697555%200-0.992607%200L633.676224%20459.529975%20633.676224%20411.842883%20633.676224%20411.842883zM585.989131%20508.21479l47.687092%200%200%2047.687092-47.687092%200L585.989131%20508.21479%20585.989131%20508.21479zM584.994478%20220.092697l144.060023%200%200%20144.061047L584.994478%20364.153744%20584.994478%20220.092697%20584.994478%20220.092697zM616.786555%20332.360643l80.474846%200%200-80.474846-80.474846%200L616.786555%20332.360643%20616.786555%20332.360643zM641.625266%20276.724509l30.798447%200%200%2030.797423-30.798447%200L641.625266%20276.724509%20641.625266%20276.724509zM584.994478%20459.529975l-47.689139%200%200%2096.371908%200%2047.689139%200%2047.689139-47.687092%200%200-47.689139%200-47.689139%200-96.371908L441.929108%20459.529975l0-47.689139%2047.689139%200L489.618247%20267.782859l0-47.690162%2047.687092%200%200%2047.690162L537.305339%20411.842883l47.689139%200L584.994478%20459.529975%20584.994478%20459.529975zM297.868061%20220.092697l144.061047%200%200%20144.061047L297.868061%20364.153744%20297.868061%20220.092697%20297.868061%20220.092697zM329.661162%20332.360643l80.474846%200%200-80.474846-80.474846%200L329.661162%20332.360643%20329.661162%20332.360643zM354.499873%20276.724509l30.797423%200%200%2030.797423-30.797423%200L354.499873%20276.724509%20354.499873%20276.724509zM393.246339%20411.842883l0%2047.687092-47.689139%200L297.868061%20459.529975%20297.868061%20411.842883l47.689139%200L393.246339%20411.842883%20393.246339%20411.842883zM441.929108%20651.28016%20297.868061%20651.28016l0-144.061047%20144.061047%200L441.929108%20651.28016%20441.929108%20651.28016zM410.136008%20539.012214l-80.474846%200%200%2080.474846%2080.474846%200L410.136008%20539.012214%20410.136008%20539.012214zM385.297296%20594.648348l-30.797423%200%200-30.797423%2030.797423%200L385.297296%20594.648348%20385.297296%20594.648348zM385.297296%20594.648348%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
+    --weui-URL-BODY-STAT: url("data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M277.557895 778.778947H94.315789c-13.473684 0-21.557895-10.778947-21.557894-21.557894V105.094737c0-13.473684 10.778947-21.557895 21.557894-21.557895h754.526316c13.473684 0 21.557895 10.778947 21.557895 21.557895v471.578947c0 10.778947 8.084211 18.863158 18.863158 18.863158s18.863158-8.084211 18.863158-18.863158V105.094737c0-32.336842-26.947368-59.284211-59.284211-59.284211h-754.526316c-32.336842 0-59.284211 26.947368-59.28421 59.284211v652.126316c0 32.336842 26.947368 59.284211 59.28421 59.28421h183.242106c10.778947 0 18.863158-8.084211 18.863158-18.863158s-8.084211-18.863158-18.863158-18.863158z'%3E%3C/path%3E%3Cpath d='M336.842105 714.105263c0-10.778947-8.084211-18.863158-18.863158-18.863158H169.768421c-5.389474 0-8.084211-2.694737-8.08421-8.08421V169.768421c0-5.389474 2.694737-8.084211 8.08421-8.08421H781.473684c5.389474 0 8.084211 2.694737 8.084211 8.08421v371.873684c0 10.778947 8.084211 18.863158 18.863158 18.863158s18.863158-8.084211 18.863158-18.863158V169.768421c0-24.252632-21.557895-45.810526-45.810527-45.810526H169.768421c-24.252632 0-45.810526 21.557895-45.810526 45.810526v517.389474c0 24.252632 21.557895 45.810526 45.810526 45.810526h148.210526c8.084211 0 18.863158-8.084211 18.863158-18.863158z'%3E%3C/path%3E%3Cpath d='M945.852632 735.663158c0-2.694737-2.694737-2.694737-2.694737-2.694737-29.642105-48.505263-70.063158-88.926316-118.568421-118.568421l-2.694737-2.694737h-2.694737c-48.505263-26.947368-105.094737-43.115789-164.378947-43.115789-59.284211 0-115.873684 16.168421-164.378948 43.115789h-2.694737l-2.694736 2.694737c-48.505263 29.642105-88.926316 70.063158-118.568421 118.568421l-2.694737 2.694737v2.694737c-26.947368 48.505263-43.115789 105.094737-43.11579 164.378947 0 10.778947 8.084211 18.863158 18.863158 18.863158h61.978947c10.778947 0 18.863158-8.084211 18.863158-18.863158s-8.084211-18.863158-18.863158-18.863158h-40.421052c2.694737-40.421053 13.473684-75.452632 29.642105-110.48421l35.031579 21.557894c2.694737 2.694737 5.389474 2.694737 8.084211 2.694737 5.389474 0 13.473684-2.694737 16.168421-10.778947 5.389474-8.084211 2.694737-21.557895-8.084211-26.947369l-35.031579-21.557894c21.557895-32.336842 48.505263-59.284211 80.842105-80.842106l21.557895 35.031579c2.694737 5.389474 10.778947 10.778947 16.168421 10.778948 2.694737 0 5.389474 0 8.084211-2.694737 8.084211-5.389474 13.473684-16.168421 8.08421-26.947368l-21.557894-35.031579c32.336842-16.168421 70.063158-26.947368 110.48421-29.642106v40.421053c0 10.778947 8.084211 18.863158 18.863158 18.863158s18.863158-8.084211 18.863158-18.863158v-40.421053c40.421053 2.694737 75.452632 13.473684 110.48421 29.642106l-10.778947 35.031579c-5.389474 8.084211-2.694737 21.557895 8.084211 26.947368h8.08421c5.389474 0 13.473684-2.694737 16.168421-8.084211l21.557895-35.031579c32.336842 21.557895 59.284211 48.505263 80.842105 80.842106l-35.031579 21.557894c-8.084211 5.389474-13.473684 16.168421-8.08421 26.947369 2.694737 5.389474 10.778947 10.778947 16.168421 10.778947 2.694737 0 5.389474 0 8.08421-2.694737l35.031579-21.557894c16.168421 32.336842 26.947368 70.063158 29.642105 110.48421h-40.421052c-10.778947 0-18.863158 8.084211-18.863158 18.863158s8.084211 18.863158 18.863158 18.863158H970.105263c10.778947 0 18.863158-8.084211 18.863158-18.863158 0-61.978947-16.168421-118.568421-43.115789-167.073684z'%3E%3C/path%3E%3Cpath d='M819.2 786.863158l-110.484211 61.978947c-10.778947-10.778947-24.252632-18.863158-40.421052-18.863158-37.726316-5.389474-72.757895 21.557895-78.147369 59.284211 0 8.084211 0 18.863158 2.694737 26.947368l-48.505263 26.947369c-8.084211 5.389474-13.473684 16.168421-8.08421 26.947368 2.694737 5.389474 10.778947 10.778947 16.168421 10.778948 2.694737 0 5.389474 0 8.08421-2.694737l48.505263-26.947369c10.778947 10.778947 24.252632 18.863158 40.421053 18.863158h10.778947c35.031579 0 64.673684-24.252632 70.063158-59.28421 0-8.084211 0-18.863158-2.694737-26.947369l110.484211-61.978947c8.084211-5.389474 13.473684-16.168421 8.08421-26.947369-8.084211-10.778947-18.863158-13.473684-26.947368-8.08421z m-164.378947 142.821053c-8.084211 0-16.168421-5.389474-21.557895-13.473685-5.389474-8.084211-8.084211-16.168421-5.389474-24.252631 2.694737-16.168421 16.168421-26.947368 32.336842-26.947369h5.389474c8.084211 0 16.168421 5.389474 21.557895 13.473685 5.389474 8.084211 8.084211 16.168421 5.389473 24.252631-2.694737 18.863158-21.557895 29.642105-37.726315 26.947369zM320.673684 291.031579c-10.778947 0-18.863158 8.084211-18.863158 18.863158v210.189474c0 10.778947 8.084211 18.863158 18.863158 18.863157h61.978948c10.778947 0 18.863158-8.084211 18.863157-18.863157v-210.189474c0-10.778947-8.084211-18.863158-18.863157-18.863158h-61.978948z m43.11579 210.189474h-24.252632v-172.463158h24.252632v172.463158zM576.673684 223.663158c-10.778947 0-18.863158 8.084211-18.863158 18.863158v277.557895c0 10.778947 8.084211 18.863158 18.863158 18.863157h61.978948c10.778947 0 18.863158-8.084211 18.863157-18.863157V242.526316c0-10.778947-8.084211-18.863158-18.863157-18.863158h-61.978948zM619.789474 501.221053h-24.252632V261.389474h24.252632v239.831579zM450.021053 350.315789c-10.778947 0-18.863158 8.084211-18.863158 18.863158v150.905264c0 10.778947 8.084211 18.863158 18.863158 18.863157H512c10.778947 0 18.863158-8.084211 18.863158-18.863157v-150.905264c0-10.778947-8.084211-18.863158-18.863158-18.863158h-61.978947z m43.115789 150.905264h-24.252631v-113.178948h24.252631v113.178948z'%3E%3C/path%3E%3C/svg%3E");
+    --weui-URL-TREAD-MILL: url("data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M636 744.8c-20 0-39.2-11.2-48.8-29.6L476 577.6l-88.8-20-20.8 64c-3.2 10.4-9.6 19.2-17.6 25.6-0.8 0.8-2.4 1.6-3.2 2.4L196 720c-8 6.4-17.6 9.6-27.2 11.2-18.4 1.6-36.8-5.6-48-20-19.2-23.2-16-58.4 7.2-77.6 0.8-0.8 2.4-1.6 3.2-2.4l136-60.8 24.8-76.8 46.4-184.8-53.6 5.6-47.2 71.2c-8.8 13.6-24 22.4-40 24.8-12.8 1.6-25.6-1.6-36-8.8-25.6-16.8-32-51.2-15.2-76L207.2 232c8.8-13.6 24-22.4 40-24.8l128-13.6h10.4c4 0 7.2 0.8 10.4 1.6l109.6 20 56.8-5.6L599.2 128c6.4-13.6 16.8-24 30.4-28.8 13.6-5.6 28.8-4.8 42.4 0.8 28 12.8 40 44.8 28 72.8l-49.6 110.4c-8 17.6-24.8 30.4-44.8 32l-92.8 9.6L480 465.6l44 10.4c16 4 28.8 13.6 36.8 28l123.2 159.2c0.8 0.8 1.6 1.6 1.6 2.4 13.6 27.2 1.6 60-25.6 73.6-5.6 2.4-12 4.8-18.4 5.6h-5.6zM376.8 523.2c1.6 0 3.2 0 4.8 0.8 0.8 0 1.6 0.8 2.4 0.8l103.2 24c3.2 0.8 6.4 2.4 8.8 5.6l116 143.2c0.8 0.8 1.6 1.6 1.6 3.2 4 8.8 13.6 14.4 24 13.6 2.4 0 5.6-0.8 8-2.4 11.2-5.6 16-18.4 11.2-30.4l-121.6-160c-0.8-0.8-1.6-1.6-1.6-2.4-3.2-6.4-8.8-11.2-16-12.8l-60-13.6c-4-0.8-8-3.2-9.6-7.2-2.4-3.2-3.2-8-1.6-12l39.2-166.4c1.6-6.4 7.2-11.2 13.6-12l104-11.2c8-0.8 16-6.4 19.2-13.6l48-110.4c5.6-12 0-25.6-12-31.2-5.6-2.4-12-2.4-18.4-0.8-5.6 2.4-10.4 6.4-12.8 12.8l-40 89.6c-2.4 4.8-7.2 8.8-12.8 9.6l-68 7.2h-4.8l-112.8-20c-0.8 0-1.6 0-1.6-0.8-1.6-0.8-3.2-0.8-5.6-0.8h-4l-128 13.6c-7.2 0.8-13.6 4.8-17.6 10.4l-61.6 92.8c-7.2 11.2-4 25.6 6.4 32.8 4.8 3.2 9.6 4 15.2 4 7.2-0.8 13.6-4.8 17.6-10.4l51.2-77.6c2.4-4 7.2-6.4 11.2-7.2l83.2-8.8c4.8-0.8 10.4 1.6 13.6 5.6 3.2 4 4.8 8.8 3.2 14.4L320 502.4v0.8l-27.2 84c-1.6 4-4.8 8-8.8 9.6L144 659.2c-8.8 8.8-9.6 22.4-1.6 32 4.8 6.4 12.8 9.6 20.8 8.8 4.8-0.8 8.8-2.4 12.8-5.6 0.8-0.8 2.4-1.6 3.2-2.4L328 622.4c3.2-2.4 4.8-6.4 6.4-9.6l25.6-78.4c1.6-4 4-7.2 8-9.6 4-1.6 6.4-1.6 8.8-1.6z'%3E%3C/path%3E%3Cpath d='M468 182.4c-18.4 0-36-6.4-50.4-17.6-16.8-13.6-27.2-32.8-29.6-54.4-2.4-21.6 4-42.4 17.6-59.2 13.6-16.8 32.8-27.2 54.4-29.6 44-4.8 84 27.2 88 71.2 2.4 21.6-4 42.4-17.6 59.2-13.6 16.8-32.8 27.2-54.4 29.6-1.6 0.8-4.8 0.8-8 0.8z m0.8-128.8H464c-12.8 1.6-24.8 8-32.8 17.6-8 10.4-12 23.2-10.4 36 1.6 12.8 8 24.8 17.6 32.8 10.4 8 23.2 12 36 10.4 12.8-1.6 24.8-8 32.8-17.6 8-10.4 12-23.2 10.4-36-3.2-24.8-24.8-43.2-48.8-43.2zM996 920.8H28c-8.8 0-16-7.2-16-16 0-76 62.4-138.4 138.4-138.4h845.6c8.8 0 16 7.2 16 16v123.2c0 8.8-7.2 15.2-16 15.2zM44.8 889.6h936V798.4H150.4c-53.6 0-98.4 40-105.6 91.2z'%3E%3C/path%3E%3Cpath d='M124 1002.4h-96c-8.8 0-16-7.2-16-16v-80.8c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v80.8c-0.8 8.8-7.2 16-16 16z m-80.8-32h64.8v-49.6H43.2v49.6zM996 1002.4h-96c-8.8 0-16-7.2-16-16v-80.8c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v80.8c0 8.8-7.2 16-16 16z m-80-32h64.8v-49.6h-64.8v49.6zM996 798.4c-7.2 0-13.6-4.8-15.2-12.8l-110.4-523.2H768c-8.8 0-16-7.2-16-16s7.2-16 16-16h115.2c7.2 0 13.6 5.6 15.2 12.8l112.8 535.2c1.6 8.8-4 16.8-12 18.4-0.8 1.6-1.6 1.6-3.2 1.6z'%3E%3C/path%3E%3Cpath d='M883.2 262.4c-3.2 0-7.2-0.8-9.6-3.2-6.4-5.6-8-15.2-2.4-22.4l84.8-106.4c5.6-7.2 15.2-8 22.4-2.4 6.4 5.6 8 15.2 2.4 22.4L896 256.8c-3.2 4-8 5.6-12.8 5.6z'%3E%3C/path%3E%3C/svg%3E");
+    --weui-URL-COPY: url("data:image/svg+xml;utf-8,%3Csvg width='1024' height='1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z'%3E%3C/path%3E%3C/svg%3E");
+    --weui-URL-STAR: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M565.273 34.627L677.369 272.17c8.706 18.32 25.411 31.051 44.823 33.996l250.776 38.081c48.698 7.411 68.225 70.046 32.934 105.98L824.407 635.164c-13.998 14.23-20.352 34.815-17.059 54.935l42.82 261.127c8.346 50.696-42.643 89.452-86.226 65.519L539.634 893.474c-17.286-9.526-37.992-9.526-55.278 0l-224.314 123.27c-43.583 23.934-94.572-14.822-86.22-65.518L216.638 690.1c3.32-20.12-3.089-40.705-17.087-54.935L18.11 450.227c-35.285-35.934-15.818-98.574 32.934-105.98l250.75-38.081c19.35-2.94 36.082-15.675 44.756-33.996L458.673 34.627c21.825-46.168 84.836-46.168 106.6 0z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+[class^="weui-icon-"],
+[class*=" weui-icon-"] {
+    display: inline-block;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    -webkit-mask-position: 50% 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask-position: 50% 50%;
+    mask-repeat: no-repeat;
+    mask-size: 100%;
+    background-color: currentColor;
+
+    // 平滑升级
+    //&:not([class^="weui-icon_"]):not([class*=" weui-icon_"]){
+    //    font-size:14px;
+    //    margin-left: .2em;
+    //    margin-right: .2em;
+    //}
+}
+
+
+// icon map
+.weui-icon-circle {
+    -webkit-mask-image: var(--weui-URL-CIRCLE);
+    mask-image: var(--weui-URL-CIRCLE);
+}
+
+.weui-icon-download {
+    -webkit-mask-image: var(--weui-URL-DOWNLOAD);
+    mask-image: var(--weui-URL-DOWNLOAD);
+}
+
+.weui-icon-info {
+    -webkit-mask-image: var(--weui-URL-INFO);
+    mask-image: var(--weui-URL-INFO);
+}
+
+.weui-icon-safe-success {
+    -webkit-mask-image: var(--weui-URL-SAFE-SUCCESS);
+    mask-image: var(--weui-URL-SAFE-SUCCESS);
+}
+
+.weui-icon-safe-warn {
+    -webkit-mask-image: var(--weui-URL-SAFE-WARN);
+    mask-image: var(--weui-URL-SAFE-WARN);
+}
+
+.weui-icon-success {
+    -webkit-mask-image: var(--weui-URL-SUCCESS);
+    mask-image: var(--weui-URL-SUCCESS);
+}
+
+.weui-icon-success-circle {
+    -webkit-mask-image: var(--weui-URL-SUCCESS-CIRCLE);
+    mask-image: var(--weui-URL-SUCCESS-CIRCLE);
+}
+
+.weui-icon-success-no-circle {
+    -webkit-mask-image: var(--weui-URL-SUCCESS-NO-CIRCLE);
+    mask-image: var(--weui-URL-SUCCESS-NO-CIRCLE);
+}
+
+.weui-icon-waiting {
+    -webkit-mask-image: var(--weui-URL-WAITING);
+    mask-image: var(--weui-URL-WAITING);
+}
+
+.weui-icon-waiting-circle {
+    -webkit-mask-image: var(--weui-URL-WAITING-CIRCLE);
+    mask-image: var(--weui-URL-WAITING-CIRCLE);
+}
+
+.weui-icon-warn {
+    -webkit-mask-image: var(--weui-URL-WARN);
+    mask-image: var(--weui-URL-WARN);
+}
+
+.weui-icon-info-circle {
+    -webkit-mask-image: var(--weui-URL-INFO-CIRCLE);
+    mask-image: var(--weui-URL-INFO-CIRCLE);
+}
+
+.weui-icon-cancel {
+    -webkit-mask-image: var(--weui-URL-CANCEL);
+    mask-image: var(--weui-URL-CANCEL);
+}
+
+.weui-icon-search {
+    -webkit-mask-image: var(--weui-URL-SEARCH);
+    mask-image: var(--weui-URL-SEARCH);
+}
+
+.weui-icon-clear {
+    -webkit-mask-image: var(--weui-URL-CLEAR);
+    mask-image: var(--weui-URL-CLEAR);
+}
+
+.weui-icon-back {
+    -webkit-mask-image: var(--weui-URL-BACK);
+    mask-image: var(--weui-URL-BACK);
+}
+
+.weui-icon-delete {
+    -webkit-mask-image: var(--weui-URL-DELETE);
+    mask-image: var(--weui-URL-DELETE);
+}
+
+.weui-icon-success-no-circle-thin {
+    -webkit-mask-image: var(--weui-URL-SUCCESS-NO-CIRCLE-THIN);
+    mask-image: var(--weui-URL-SUCCESS-NO-CIRCLE-THIN);
+}
+
+.weui-icon-arrow {
+    -webkit-mask-image: var(--weui-URL-ARROW);
+    mask-image: var(--weui-URL-ARROW);
+}
+
+.weui-icon-arrow-bold {
+    -webkit-mask-image: var(--weui-URL-ARROW-BOLD);
+    mask-image: var(--weui-URL-ARROW-BOLD);
+}
+
+.weui-icon-back-arrow {
+    -webkit-mask-image: var(--weui-URL-BACK-ARROW);
+    mask-image: var(--weui-URL-BACK-ARROW);
+}
+
+.weui-icon-back-arrow-thin {
+    -webkit-mask-image: var(--weui-URL-BACK-ARROW-THIN);
+    mask-image: var(--weui-URL-BACK-ARROW-THIN);
+}
+
+.weui-icon-close {
+    -webkit-mask-image: var(--weui-URL-CLOSE);
+    mask-image: var(--weui-URL-CLOSE);
+}
+
+.weui-icon-close-thin {
+    -webkit-mask-image: var(--weui-URL-CLOSE-THIN);
+    mask-image: var(--weui-URL-CLOSE-THIN);
+}
+
+.weui-icon-back-circle {
+    -webkit-mask-image: var(--weui-URL-BACK-CIRCLE);
+    mask-image: var(--weui-URL-BACK-CIRCLE);
+}
+
+.weui-icon-scan {
+    -webkit-mask-image: var(--weui-URL-SCAN);
+    mask-image: var(--weui-URL-SCAN);
+}
+
+.weui-icon-qrcode {
+    -webkit-mask-image: var(--weui-URL-QRCODE);
+    mask-image: var(--weui-URL-QRCODE);
+}
+
+.weui-icon-flashlight {
+    -webkit-mask-image: var(--weui-URL-FLASHLIGHT);
+    mask-image: var(--weui-URL-FLASHLIGHT);
+}
+
+.weui-icon-location {
+    -webkit-mask-image: var(--weui-URL-LOCATION);
+    mask-image: var(--weui-URL-LOCATION);
+}
+
+.weui-icon-mobile-qrcode {
+    -webkit-mask-image: var(--weui-URL-MOBLE-QRCODE);
+    mask-image: var(--weui-URL-MOBLE-QRCODE);
+}
+
+.weui-icon-body-stat {
+    -webkit-mask-image: var(--weui-URL-BODY-STAT);
+    mask-image: var(--weui-URL-BODY-STAT);
+}
+
+.weui-icon-tread-mill {
+    -webkit-mask-image: var(--weui-URL-TREAD-MILL);
+    mask-image: var(--weui-URL-TREAD-MILL);
+}
+
+.weui-icon-copy {
+    -webkit-mask-image: var(--weui-URL-COPY);
+    mask-image: var(--weui-URL-COPY);
+}
+
+.weui-icon-star {
+    -webkit-mask-image: var(--weui-URL-STAR);
+    mask-image: var(--weui-URL-STAR);
+}
+
+// icon setting
+.weui-icon-success {
+    color: @weuiColorPrimary;
+}
+
+.weui-icon-waiting {
+    color: var(--weui-BLUE);
+}
+
+.weui-icon-warn {
+    color: @weuiColorWarn;
+}
+
+.weui-icon-info {
+    color: var(--weui-BLUE);
+}
+
+.weui-icon-success-circle {
+    color: @weuiColorPrimary;
+}
+
+.weui-icon-success-no-circle,
+.weui-icon-success-no-circle-thin {
+    color: @weuiColorPrimary;
+}
+
+.weui-icon-waiting-circle {
+    color: var(--weui-BLUE);
+}
+
+.weui-icon-circle {
+    color: @weuiTextColorTips;
+}
+
+.weui-icon-download {
+    color: @weuiColorPrimary;
+}
+
+.weui-icon-info-circle {
+    color: @weuiTextColorTips;
+}
+
+.weui-icon-safe-success {
+    color: @weuiColorPrimary;
+}
+
+.weui-icon-safe-warn {
+    color: var(--weui-YELLOW);
+}
+
+.weui-icon-cancel {
+    color: @weuiColorWarn;
+}
+
+.weui-icon-search {
+    color: @weuiTextColorDesc;
+}
+
+.weui-icon-clear {
+    color: @weuiTextColorTips;
+
+    &:active {
+        color: @weuiTextColorDesc;
+    }
+}
+
+.weui-icon-delete {
+    &.weui-icon_gallery-delete {
+        color: var(--weui-WHITE);
+    }
+}
+
+.weui-icon-arrow,
+.weui-icon-arrow-bold,
+.weui-icon-back-arrow,
+.weui-icon-back-arrow-thin {
+    width: 12px;
+}
+
+.weui-icon-arrow,
+.weui-icon-arrow-bold {
+    color: @weuiTextColorTips;
+}
+
+.weui-icon-back-arrow,
+.weui-icon-back-arrow-thin {
+    color: @weuiTextColorTitle;
+}
+
+.weui-icon-back,
+.weui-icon-back-circle {
+    color: @weuiTextColorTitle;
+}
+
+.weui-icon_msg {
+    width: 64px;
+    height: 64px;
+
+    &.weui-icon-warn {
+        color: @weuiColorWarn;
+    }
+}
+
+.weui-icon_msg-primary {
+    width: 64px;
+    height: 64px;
+
+    &.weui-icon-warn {
+        color: var(--weui-YELLOW);
+    }
+}
diff --git a/src/app/style/weui.less b/src/app/style/weui.less
new file mode 100644
index 0000000..514a3f4
--- /dev/null
+++ b/src/app/style/weui.less
@@ -0,0 +1,104 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* 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 "./base/reset";
+
+// theme
+@import "./base/theme/index";
+
+// icon font
+@import "./icon/weui-icon";
+
+
+// text
+@import "./widget/weui-text/weui-link";
+
+// button
+@import "./widget/weui-button/weui-button";
+
+// cell
+@import "./widget/weui-cell/weui-cell_global";
+@import "./widget/weui-cell/weui-cell_swiped";
+@import "./widget/weui-cell/weui-access";
+@import "./widget/weui-cell/weui-check";
+@import "./widget/weui-cell/weui-form";
+@import "./widget/weui-cell/weui-gallery";
+@import "./widget/weui-cell/weui-switch";
+@import "./widget/weui-cell/weui-uploader";
+
+// msg
+@import "./widget/weui-page/weui-msg";
+
+// form
+@import "./widget/weui-page/weui-form";
+
+// article
+@import "./widget/weui-page/weui-article";
+
+// tab
+@import "./widget/weui-tab/weui-tab";
+
+// progress
+@import "./widget/weui-progress/weui-progress";
+
+// panel
+@import "./widget/weui-panel/weui-panel";
+
+// media box
+@import "./widget/weui-media-box/weui-media-box";
+
+// grid
+@import "./widget/weui-grid/weui-grid";
+
+// copyright
+@import "./widget/weui-footer/weui-footer";
+
+
+// flex
+@import "./widget/weui-flex/weui-flex";
+
+// tips
+@import "./widget/weui-tips/weui-dialog";
+@import "./widget/weui-tips/weui-half-screen-dialog";
+@import "./widget/weui-tips/weui-toast";
+@import "./widget/weui-tips/weui-mask";
+@import "./widget/weui-tips/weui-actionsheet";
+@import "./widget/weui-tips/weui-loadmore";
+@import "./widget/weui-tips/weui-badge";
+@import "./widget/weui-tips/weui-toptips";
+
+//searchbar
+@import "./widget/weui-searchbar/weui-searchbar";
+
+// picker
+@import "./widget/weui-picker/weui-picker";
+
+// animate
+@import "./widget/weui-animate/weui-animate";
+
+// agree
+@import "./widget/weui-agree/weui-agree";
+
+// loading
+@import "./widget/weui-loading/weui-loading";
+
+// slider
+@import "./widget/weui-slider/weui-slider";
+
+
+
+// 小程序 patch 兼容文件，放在最后
+@import "./base/patch";
diff --git a/src/app/style/widget/weui-agree/weui-agree.less b/src/app/style/widget/weui-agree/weui-agree.less
new file mode 100644
index 0000000..49aeea2
--- /dev/null
+++ b/src/app/style/widget/weui-agree/weui-agree.less
@@ -0,0 +1,103 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-agree {
+    display: block;
+    padding: 8px 15px 0;
+    font-size: 14px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    a,
+    navigator {
+        color: @weuiLinkColorDefault;
+    }
+    navigator {
+        display: inline;
+    }
+}
+.weui-agree__text {
+    color: @weuiTextColorDesc;
+    margin-left: 2px;
+}
+.weui-agree__checkbox {
+    appearance: none;
+    display: inline-block;
+    border: 0;
+    outline: 0;
+    vertical-align: middle;
+    background-color: currentColor;
+    mask-position: 0 0;
+    mask-repeat: no-repeat;
+    mask-size: 100%;
+    mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+    color: @weuiLineColorDark;
+    width: 1em;
+    height: 1em;
+    font-size: 17px;
+    margin-top: -0.2em;
+}
+.weui-agree__checkbox-check { // 兼容小程序
+    position: absolute;
+    left: -9999px;
+}
+.weui-agree__checkbox:checked,
+.weui-agree__checkbox-check[aria-checked="true"] + .weui-agree__checkbox {
+    mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+    color: @weuiColorPrimary;
+}
+.weui-agree_animate {
+    animation: weuiAgree 0.3s 1;
+}
+
+@keyframes weuiAgree {
+    0% {
+        transform: translateX(0);
+    }
+
+    16% {
+        transform: translateX(-8px);
+    }
+
+    28% {
+        transform: translateX(-16px);
+    }
+
+    44% {
+        transform: translateX(0);
+    }
+
+    59% {
+        transform: translateX(-16px);
+    }
+
+    73% {
+        transform: translateX(0);
+    }
+
+    82% {
+        transform: translateX(16px);
+    }
+
+    94% {
+        transform: translateX(8px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
diff --git a/src/app/style/widget/weui-animate/weui-animate.less b/src/app/style/widget/weui-animate/weui-animate.less
new file mode 100644
index 0000000..55b5541
--- /dev/null
+++ b/src/app/style/widget/weui-animate/weui-animate.less
@@ -0,0 +1,71 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@keyframes slideUp {
+    from {
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.weui-animate-slide-up {
+    animation: slideUp ease 0.3s forwards;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.weui-animate-slide-down {
+    animation: slideDown ease 0.3s forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.weui-animate-fade-in {
+    animation: fadeIn ease 0.3s forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.weui-animate-fade-out {
+    animation: fadeOut ease 0.3s forwards;
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_cell.less b/src/app/style/widget/weui-button/weui-btn_cell.less
new file mode 100644
index 0000000..7e12af7
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_cell.less
@@ -0,0 +1,59 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_cell {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+    font-size: @weuiBtnFontSize;
+    text-align: center;
+    text-decoration: none;
+    color: @weuiBtnFontColor;
+    line-height: @weuiBtnCellLineHeight;
+    padding: @weuiBtnCellGap;
+    .setTapColor();
+
+    overflow: hidden;
+    background-color: var(--weui-BG-5);
+    & + & {
+        margin-top: @weuiBtnDefaultGap;
+    }
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+}
+.weui-btn_cell__icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    margin: -0.2em 0.34em 0 0;
+}
+.weui-btn_cell-default {
+    color: var(--weui-FG-0);
+}
+.weui-btn_cell-primary {
+    color: @weuiLinkColorDefault;
+}
+.weui-btn_cell-warn {
+    color: @weuiColorWarn;
+}
+
+
diff --git a/src/app/style/widget/weui-button/weui-btn_default.less b/src/app/style/widget/weui-button/weui-btn_default.less
new file mode 100644
index 0000000..19b268d
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_default.less
@@ -0,0 +1,28 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_default {
+    color: @weuiBtnDefaultFontColor;
+    background-color: @weuiBtnDefaultBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnDefaultFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        background-color: @weuiBtnDefaultActiveBg;
+    }
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_disabled.less b/src/app/style/widget/weui-button/weui-btn_disabled.less
new file mode 100644
index 0000000..3e7ab32
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_disabled.less
@@ -0,0 +1,22 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_disabled {
+    color: @weuiBtnDisabledFontColor;
+    background-color: @weuiBtnDisabledBg;
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_global.less b/src/app/style/widget/weui-button/weui-btn_global.less
new file mode 100644
index 0000000..f81dd16
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_global.less
@@ -0,0 +1,43 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn {
+    position: relative;
+    display: block;
+    width: @weuiBtnWidth;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 8px 24px;
+    box-sizing: border-box;
+    font-weight: 700;
+    font-size: @weuiBtnFontSize;
+    text-align: center;
+    text-decoration: none;
+    color: @weuiBtnFontColor;
+    line-height: unit((@weuiBtnHeight - 16) / @weuiBtnFontSize);
+    border-radius: @weuiBtnBorderRadius;
+    overflow: hidden;
+    
+    .setTapColor();
+}
+.weui-btn_block {
+    width: auto;
+}
+.weui-btn_inline {
+    display: inline-block;
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_loading.less b/src/app/style/widget/weui-button/weui-btn_loading.less
new file mode 100644
index 0000000..1dc835c
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_loading.less
@@ -0,0 +1,37 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_loading {
+    .weui-loading {
+        margin: -0.2em 0.34em 0 0;
+    }
+    .weui-primary-loading {
+        margin: -.2em 8px 0 0;
+        vertical-align:middle;
+    }
+    &.weui-btn_primary {
+        background-color: @weuiBtnPrimaryActiveBg;
+        color: var(--weui-WHITE);
+    }
+    &.weui-btn_default {
+        background-color: @weuiBtnDefaultActiveBg;
+    }
+    &.weui-btn_warn {
+        background-color: @weuiBtnWarnActiveBg;
+    }
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_primary.less b/src/app/style/widget/weui-button/weui-btn_primary.less
new file mode 100644
index 0000000..eaef9b8
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_primary.less
@@ -0,0 +1,27 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_primary {
+    background-color: @weuiBtnPrimaryBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnPrimaryFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        background-color: @weuiBtnPrimaryActiveBg;
+    }
+}
diff --git a/src/app/style/widget/weui-button/weui-btn_warn.less b/src/app/style/widget/weui-button/weui-btn_warn.less
new file mode 100644
index 0000000..0ffe6b0
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-btn_warn.less
@@ -0,0 +1,28 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-btn_warn {
+    color: @weuiBtnWarnFontColor;
+    background-color: @weuiBtnWarnBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnWarnFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        background-color: @weuiBtnWarnActiveBg;
+    }
+}
diff --git a/src/app/style/widget/weui-button/weui-button.less b/src/app/style/widget/weui-button/weui-button.less
new file mode 100644
index 0000000..b95fb91
--- /dev/null
+++ b/src/app/style/widget/weui-button/weui-button.less
@@ -0,0 +1,90 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "weui-btn_global";
+@import "weui-btn_default";
+@import "weui-btn_primary";
+@import "weui-btn_warn";
+@import "weui-btn_disabled";
+@import "weui-btn_loading";
+@import "weui-btn_cell";
+
+button,
+input {
+    &.weui-btn {
+        border-width: 0;
+        outline: 0;
+        -webkit-appearance: none;
+        &:focus {
+            outline: 0;
+        }
+    }
+    &.weui-btn_inline,
+    &.weui-btn_mini {
+        width: auto;
+    }
+}
+
+.weui-btn_mini {
+    display: inline-block;
+    width: auto;
+    padding: 0 unit(12px/@weuiBtnMiniFontSize, em);
+    line-height: unit(@weuiBtnMiniHeight/@weuiBtnMiniFontSize);
+    font-size: @weuiBtnMiniFontSize;
+}
+
+
+/* gap between btn */
+.weui-btn:not(.weui-btn_mini) + .weui-btn:not(.weui-btn_mini) {
+    margin-top: @weuiBtnDefaultGap;
+}
+
+.weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline {
+    margin-top: auto;
+    margin-left: @weuiBtnDefaultGap;
+}
+
+.weui-btn-area {
+    margin: 48px @weuiBtnDefaultGap 8px;
+}
+.weui-btn-area_inline {
+    display: flex;
+    .weui-btn {
+        margin-top: auto;
+        margin-right: @weuiBtnDefaultGap;
+        width: 100%;
+        flex: 1;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+.weui-btn_reset {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    outline: 0;
+}
+.weui-btn_icon {
+    font-size: 0;
+    &:active {
+        [class*="weui-icon-"] {
+            color: var(--weui-FG-1);
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-access.less b/src/app/style/widget/weui-cell/weui-access.less
new file mode 100644
index 0000000..defbc3e
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-access.less
@@ -0,0 +1,56 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-cell_access {
+    .setTapColor();
+
+    color: inherit;
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+    .weui-cell__ft {
+        padding-right: 22px;
+        position: relative;
+        &:after {
+            content: " ";
+            width: 12px;
+            height: 24px;
+            mask-position: 0 0;
+            mask-repeat: no-repeat;
+            mask-size: 100%;
+            background-color: currentColor;
+            color: @weuiTextColorTips;
+            mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+            position: absolute;
+            top: 50%;
+            right: 0;
+            margin-top: -12px;
+        }
+    }
+}
+.weui-cell_link {
+    color: @weuiLinkColorDefault;
+    font-size: 17px;
+
+    // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来
+    &:first-child {
+        &:before {
+            display: block;
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-cell_global.less b/src/app/style/widget/weui-cell/weui-cell_global.less
new file mode 100644
index 0000000..4545607
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-cell_global.less
@@ -0,0 +1,108 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+/*
+z-index:
+0: .weui-swiped-btn
+1: .weui-cell_swiped .weui-cell__bd
+2: .weui-cells和.weui-cell的1px线
+*/
+
+.weui-cells {
+    margin-top: @weuiCellsMarginTop;
+    background-color: @weuiCellBg;
+    line-height: @weuiCellLineHeight;
+    font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
+    overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
+
+    // onepx
+    position: relative;
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+
+        z-index: 2;
+    }
+    &:after {
+        .setBottomLine(@weuiCellBorderColor);
+
+        z-index: 2;
+    }
+}
+
+.weui-cells__title {
+    margin-top: 16px;
+    margin-bottom: 3px;
+    padding-left: @weuiCellGapH;
+    padding-right: @weuiCellGapH;
+    color: @weuiTextColorDesc;
+    font-size: @weuiCellTipsFontSize;
+    line-height: 1.4;
+
+    & + .weui-cells {
+        margin-top: 0;
+    }
+}
+
+.weui-cells__tips {
+    margin-top: 8px;
+    color: @weuiTextColorDesc;
+    padding-left: @weuiCellGapH;
+    padding-right: @weuiCellGapH;
+    font-size: @weuiCellTipsFontSize;
+    line-height: 1.4;
+    a,
+    navigator {
+        color: @weuiLinkColorDefault;
+    }
+    navigator {
+        display: inline;
+    }
+}
+
+.weui-cell {
+    padding: @weuiCellGapV;
+    position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
+    display: flex;
+    align-items: center;
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+
+        left: @weuiCellGapH;
+        z-index: 2;
+    }
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+}
+.weui-cell_active {
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+}
+.weui-cell_primary {
+    align-items: flex-start;
+}
+.weui-cell__bd {
+    flex: 1;
+}
+.weui-cell__ft {
+    text-align: right;
+    color: @weuiTextColorDesc;
+}
diff --git a/src/app/style/widget/weui-cell/weui-cell_swiped.less b/src/app/style/widget/weui-cell/weui-cell_swiped.less
new file mode 100644
index 0000000..8a1a489
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-cell_swiped.less
@@ -0,0 +1,47 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-cell_swiped {
+    display: block;
+    padding: 0;
+    > .weui-cell__bd {
+        position: relative;
+        z-index: 1;
+        background-color: @weuiCellBg;
+    }
+    > .weui-cell__ft {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        color: #fff; // 固定色值
+    }
+}
+.weui-swiped-btn {
+    display: block;
+    padding: @weuiCellGapV 1em;
+    line-height: @weuiCellLineHeight;
+    color: inherit;
+}
+.weui-swiped-btn_default {
+    background-color: @weuiBgColorDefault;
+}
+.weui-swiped-btn_warn {
+    background-color: @weuiColorWarn;
+}
diff --git a/src/app/style/widget/weui-cell/weui-cells__group.less b/src/app/style/widget/weui-cell/weui-cells__group.less
new file mode 100644
index 0000000..f6377bf
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-cells__group.less
@@ -0,0 +1,135 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-cells__group{}
+.weui-cells__group_form {
+
+    &:first-child {
+        .weui-cells__title {
+            margin-top: 0;
+        }
+    }
+
+    .weui-cells__title {
+        margin-top: 24px;
+        margin-bottom: 8px;
+        padding: 0 32px;
+    }
+  
+
+    .weui-cells,
+    .weui-cell {
+        &:before {
+            left: 32px;
+            right: 32px;
+        }
+    }
+    .weui-cells_checkbox {
+        .weui-check__label {
+            &:before { left: 72px; }
+        }
+    }
+    .weui-cells {
+        &:after {
+            left: 32px;
+            right: 32px;
+        }
+    }
+    .weui-cell {
+        padding: 16px 32px;
+        &:not(.weui-cell_link) {
+            color: @weuiTextColorTitle;
+        }
+    }
+    .weui-cell__hd {
+        padding-right: 16px;
+    }
+    .weui-cell__ft {
+        padding-left: 16px;
+    }
+    .weui-cell_warn {
+        input {
+            color: @weuiColorWarn;
+        }
+    }
+
+
+    .weui-label {
+        max-width: 5em;
+        margin-right: 8px;
+    }
+
+
+    .weui-cells__tips {
+        margin-top: 8px;
+        padding: 0 32px;
+        color: rgba(0, 0, 0, 0.3);
+        a {
+            font-weight: 700;
+        }
+    }
+
+
+    .weui-cell_vcode {
+        padding: 12px 32px;
+    }
+    .weui-vcode-btn {
+        font-size: 16px;
+        padding: 0 12px;
+        margin-left: 0;
+        height: auto;
+        width: auto;
+        line-height: 2em;
+        color: @weuiBtnDefaultFontColor;
+        background-color: @weuiBtnDefaultBg;
+        &:before {
+            display: none;
+        }
+    }
+
+
+    .weui-cell_select {
+        padding: 0;
+        .weui-select {
+            padding: 0 32px;
+        }
+        .weui-cell__bd:after {
+            right: 32px;
+        }
+    }
+    .weui-cell_select-before {
+        .weui-label {
+            margin-right: 24px;
+        }
+        .weui-select {
+            padding-right: 24px;
+            box-sizing: initial;
+        }
+    }
+    .weui-cell_select-after {
+        padding-left: 32px;
+        .weui-select {
+            padding-left: 0;
+        }
+    }
+
+
+    .weui-cell_switch {
+        padding: 12px 32px;
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-check.less b/src/app/style/widget/weui-cell/weui-check.less
new file mode 100644
index 0000000..6e2ec5a
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-check.less
@@ -0,0 +1,20 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "./weui-check/weui-check_common";
+@import "./weui-check/weui-radio";
+@import "./weui-check/weui-checkbox";
diff --git a/src/app/style/widget/weui-cell/weui-check/weui-check_common.less b/src/app/style/widget/weui-cell/weui-check/weui-check_common.less
new file mode 100644
index 0000000..82dc591
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-check/weui-check_common.less
@@ -0,0 +1,29 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+.weui-check__label {
+    .setTapColor();
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+}
+
+.weui-check {
+    position: absolute;
+    left: -9999px;
+}
diff --git a/src/app/style/widget/weui-cell/weui-check/weui-checkbox.less b/src/app/style/widget/weui-cell/weui-check/weui-checkbox.less
new file mode 100644
index 0000000..e0e4f5a
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-check/weui-checkbox.less
@@ -0,0 +1,45 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+.weui-cells_checkbox {
+    .weui-check__label {
+        &:before { left: 55px; }
+    }
+    .weui-cell__hd {
+        padding-right: @weuiCellInnerGapH;
+        font-size: 0;
+    }
+    .weui-icon-checked {
+        color: @weuiTextColorTips;
+        mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+    }
+}
+
+// method2 accessbility
+.weui-check {
+    // checkbox
+    .weui-cells_checkbox & {
+        &:checked,
+        &[aria-checked="true"] {
+            & + .weui-icon-checked {
+                color: @weuiColorPrimary;
+                mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+            }
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-check/weui-radio.less b/src/app/style/widget/weui-cell/weui-check/weui-radio.less
new file mode 100644
index 0000000..ea5c8d5
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-check/weui-radio.less
@@ -0,0 +1,41 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+// method2 accessbility
+.weui-cells_radio {
+    .weui-cell__ft {
+        padding-left: @weuiCellInnerGapH;
+        font-size: 0;
+    }
+}
+.weui-check {
+    // radio
+    .weui-cells_radio & {
+        & + .weui-icon-checked {
+            min-width: 16px;
+            color: transparent;
+        }
+        &:checked,
+        &[aria-checked="true"] {
+            & + .weui-icon-checked {
+                color: @weuiColorPrimary;
+                mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.657%2018.435L3%2012.778l1.414-1.414%204.95%204.95L20.678%205l1.414%201.414-12.02%2012.021a1%201%200%2001-1.415%200z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+            }
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-form.less b/src/app/style/widget/weui-cell/weui-form.less
new file mode 100644
index 0000000..0c7f003
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-form.less
@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "./weui-form/weui-form_common";
+@import "./weui-form/weui-form-preview";
+@import "./weui-form/weui-select";
+@import "./weui-form/weui-vcode";
diff --git a/src/app/style/widget/weui-cell/weui-form/weui-form-preview.less b/src/app/style/widget/weui-cell/weui-form/weui-form-preview.less
new file mode 100644
index 0000000..545db9c
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-form/weui-form-preview.less
@@ -0,0 +1,108 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+.weui-form-preview {
+    position: relative;
+    background-color: var(--weui-BG-2);
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+    }
+    &:after {
+        .setBottomLine(@weuiCellBorderColor);
+    }
+}
+.weui-form-preview__hd {
+    position: relative;
+    padding: @weuiCellGapV;
+    text-align: right;
+    line-height: 2.5em;
+    &:after {
+        .setBottomLine(@weuiCellBorderColor);
+
+        left: @weuiCellGapH;
+    }
+    .weui-form-preview__value {
+        font-style: normal;
+        font-size: 1.6em;
+    }
+}
+.weui-form-preview__bd {
+    padding: @weuiCellGapV;
+    font-size: 0.9em;
+    text-align: right;
+    color: @weuiTextColorDesc;
+    line-height: 2;
+}
+.weui-form-preview__ft {
+    position: relative;
+    line-height: 50px;
+    display: flex;
+    &:before {
+        .setTopLine(@weuiDialogLineColor);
+    }
+}
+.weui-form-preview__item {
+    overflow: hidden;
+}
+.weui-form-preview__label {
+    float: left;
+    margin-right: 1em;
+    min-width: 4em;
+    color: @weuiTextColorDesc;
+    text-align: justify;
+    text-align-last: justify;
+}
+.weui-form-preview__value {
+    display: block;
+    overflow: hidden;
+    word-break: normal;
+    word-wrap: break-word;
+    color: var(--weui-FG-0);
+}
+.weui-form-preview__btn {
+    position: relative;
+    display: block;
+    flex: 1;
+    color: @weuiDialogLinkColor;
+    text-align: center;
+    .setTapColor();
+    button& {
+        background-color: transparent;
+        border: 0;
+        outline: 0;
+        line-height: inherit;
+        font-size: inherit;
+    }
+    &:active {
+        background-color: @weuiDialogLinkActiveBc;
+    }
+    &:after {
+        .setLeftLine(@weuiDialogLineColor);
+    }
+    &:first-child {
+        &:after {
+            display: none;
+        }
+    }
+}
+.weui-form-preview__btn_default {
+    color: var(--weui-FG-HALF);
+}
+.weui-form-preview__btn_primary {
+    color: @weuiLinkColorDefault;
+}
diff --git a/src/app/style/widget/weui-cell/weui-form/weui-form_common.less b/src/app/style/widget/weui-cell/weui-form/weui-form_common.less
new file mode 100644
index 0000000..5dbf13a
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-form/weui-form_common.less
@@ -0,0 +1,120 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+.weui-label {
+    display: block;
+    width: @weuiCellLabelWidth;
+    .text_wrap();
+}
+.weui-input {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    -webkit-appearance: none;
+    background-color: transparent;
+    font-size: inherit;
+    color: inherit;
+    height: unit(@weuiCellLineHeight, em);
+    line-height: @weuiCellLineHeight;
+
+    // hides the spin-button
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    &:focus {
+        &:not(:placeholder-shown) {
+            & + .weui-btn_input-clear {
+                display: inline;
+            }
+        }
+    }
+}
+.weui-input::placeholder,
+.weui-input__placeholder {
+    color: var(--weui-FG-2);
+}
+
+.weui-textarea {
+    display: block;
+    border: 0;
+    resize: none;
+    background: transparent;
+    width: 100%;
+    color: inherit;
+    font-size: 1em;
+    line-height: inherit;
+    outline: 0;
+}
+
+.weui-textarea-counter {
+    color: @weuiTextColorTips;
+    text-align: right;
+    font-size: 14px;
+    .weui-cell_warn & {
+        color: @weuiTextColorWarn;
+    }
+}
+
+.weui-cells_form {
+    .weui-cell_switch,
+    .weui-cell_vcode,
+    .weui-cell_readonly,
+    .weui-cell_disabled {
+        &:active {
+            background-color: transparent;
+        }
+    }
+    .weui-cell__ft {
+        font-size: 0;
+    }
+    .weui-icon-warn {
+        display: none;
+    }
+    input,
+    textarea,
+    label[for] {
+        .setTapColor();
+    }
+}
+.weui-cell_warn {
+    color: @weuiTextColorWarn;
+    .weui-icon-warn { display: inline-block; }
+}
+.weui-cell_readonly,
+.weui-cell_disabled {
+    .weui-input,
+    .weui-textarea {
+        &:disabled {
+            opacity: 1;
+            -webkit-text-fill-color: @weuiTextColorDesc;
+        }
+        &[disabled],
+        &[readonly] {
+            color: @weuiTextColorDesc;
+        }
+    }
+}
+.weui-btn_input-clear {
+    display: none;
+    padding-left: 8px;
+    [class*="weui-icon-"] {
+        width: 18px;
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-form/weui-select.less b/src/app/style/widget/weui-cell/weui-form/weui-select.less
new file mode 100644
index 0000000..8c30ca5
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-form/weui-select.less
@@ -0,0 +1,110 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../../base/fn";
+
+.weui-cell_select {
+    padding: 0;
+    .weui-select {
+        padding-right: 30px;
+    }
+    .weui-cell__bd {
+        &:after {
+            content: " ";
+            width: 12px;
+            height: 24px;
+            mask-position: 0 0;
+            mask-repeat: no-repeat;
+            mask-size: 100%;
+            background-color: currentColor;
+            color: @weuiTextColorTips;
+            mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -12px;
+        }
+    }
+}
+
+.weui-select {
+    -webkit-appearance: none;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    width: 100%;
+    font-size: inherit;
+    height: @weuiCellHeight;
+    line-height: @weuiCellHeight;
+    position: relative;
+    z-index: 1;
+    padding-left: @weuiCellGapH;
+    color: var(--weui-FG-0);
+}
+
+.weui-cell_select-before {
+    padding-right: @weuiCellGapH;
+    .weui-select {
+        width: @weuiCellLabelWidth;
+        box-sizing: border-box;
+    }
+    .weui-cell__hd {
+        position: relative;
+        &:after {
+            .setRightLine(@weuiCellBorderColor);
+        }
+        &:before {
+            content: " ";
+            width: 12px;
+            height: 24px;
+            mask-position: 0 0;
+            mask-repeat: no-repeat;
+            mask-size: 100%;
+            background-color: currentColor;
+            color: @weuiTextColorTips;
+            mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -12px;
+        }
+    }
+    .weui-cell__bd {
+        padding-left: @weuiCellGapH;
+        &:after {
+            display: none;
+        }
+    }
+    &.weui-cell_access {
+        .weui-cell__hd {
+            line-height: 56px;
+            padding-left: 32px;
+        }
+    }
+}
+
+.weui-cell_select-after {
+    padding-left: @weuiCellGapH;
+    .weui-select {
+        padding-left: 0;
+    }
+    &.weui-cell_access {
+        .weui-cell__bd {
+            line-height: 56px;
+        }
+    }
+}
+
diff --git a/src/app/style/widget/weui-cell/weui-form/weui-vcode.less b/src/app/style/widget/weui-cell/weui-form/weui-vcode.less
new file mode 100644
index 0000000..fddf31e
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-form/weui-vcode.less
@@ -0,0 +1,51 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* 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 "../../../base/fn";
+
+.weui-cell_vcode {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+}
+.weui-vcode-img {
+    margin-left: 5px;
+    height: @weuiCellHeight;
+    vertical-align: middle;
+}
+
+.weui-vcode-btn {
+    display: inline-block;
+    height: @weuiCellHeight;
+    margin-left: 5px;
+    padding: 0 0.6em 0 0.7em;
+    line-height: @weuiCellHeight;
+    vertical-align: middle;
+    font-size: @weuiCellFontSize;
+    color: @weuiDialogLinkColor;
+    position: relative;
+    &:before {
+        .setLeftLine(@weuiLineColorLight);
+    }
+    button& {
+        background-color: transparent;
+        border: 0;
+        outline: 0;
+    }
+    &:active {
+        color: #767676; // 固定色值
+    }
+}
diff --git a/src/app/style/widget/weui-cell/weui-gallery.less b/src/app/style/widget/weui-cell/weui-gallery.less
new file mode 100644
index 0000000..8fb6c96
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-gallery.less
@@ -0,0 +1,64 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@weuiGalleryOprHeight: 60px;
+.weui-gallery {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000; // 固定色值
+    z-index: 1000;
+}
+.weui-gallery__img,
+.weui-gallery__opr {
+    position: absolute;
+    left: 0;
+    left: constant(safe-area-inset-left);
+    left: env(safe-area-inset-left);
+    right: 0;
+    right: constant(safe-area-inset-right);
+    right: env(safe-area-inset-right);
+}
+.weui-gallery__img {
+    top: 0;
+    top: constant(safe-area-inset-top);
+    top: env(safe-area-inset-top);
+    bottom: @weuiGalleryOprHeight;
+    bottom: calc(@weuiGalleryOprHeight ~"+ constant(safe-area-inset-bottom)");
+    bottom: calc(@weuiGalleryOprHeight ~"+ env(safe-area-inset-bottom)");
+    width: 100%;
+    background: center center no-repeat;
+    background-size: contain;
+}
+.weui-gallery__opr {
+    position: absolute;
+    bottom: 0;
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    background-color: #0d0d0d;  // 固定色值
+    color: var(--weui-WHITE);
+    line-height: @weuiGalleryOprHeight;
+    text-align: center;
+}
+.weui-gallery__del {
+    display: block;
+}
diff --git a/src/app/style/widget/weui-cell/weui-switch.less b/src/app/style/widget/weui-cell/weui-switch.less
new file mode 100644
index 0000000..40aeede
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-switch.less
@@ -0,0 +1,81 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-cell_switch {
+    padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+    padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+}
+.weui-switch {
+    appearance: none;
+}
+.weui-switch,
+.weui-switch-cp__box {
+    position: relative;
+    width: 52px;
+    height: @weuiSwitchHeight;
+    border: 2px solid @weuiLineColorLight;
+    outline: 0;
+    border-radius: 16px;
+    box-sizing: border-box;
+    transition: background-color 0.1s, border 0.1s;
+
+    &:before {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: 15px;
+        background-color: var(--weui-BG-3);
+        transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    }
+    &:after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: @weuiSwitchHeight - 4;
+        height: @weuiSwitchHeight - 4;
+        border-radius: 15px;
+        background-color: #fff; // 固定色值
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+        transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    }
+}
+.weui-switch:checked,
+.weui-switch-cp__input:checked + .weui-switch-cp__box,
+.weui-switch-cp__input[aria-checked="true"] + .weui-switch-cp__box {
+    border-color: @weuiColorPrimary;
+    background-color: @weuiColorPrimary;
+    &:before {
+        transform: scale(0);
+    }
+    &:after {
+        transform: translateX(20px);
+    }
+}
+
+// 兼容小程序/IE Edge的版本
+.weui-switch-cp__input {
+    position: absolute;
+    left: -9999px;
+}
+.weui-switch-cp__box {
+    display: block;
+}
diff --git a/src/app/style/widget/weui-cell/weui-uploader.less b/src/app/style/widget/weui-cell/weui-uploader.less
new file mode 100644
index 0000000..e756640
--- /dev/null
+++ b/src/app/style/widget/weui-cell/weui-uploader.less
@@ -0,0 +1,125 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-uploader {
+    flex: 1;
+}
+.weui-uploader__hd {
+    display: flex;
+    padding-bottom: @weuiCellGapV;
+    align-items: center;
+}
+.weui-uploader__title {
+    flex: 1;
+}
+.weui-uploader__info {
+    color: @weuiTextColorTips;
+}
+
+.weui-uploader__bd {
+    margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
+    margin-right: -@weuiUploaderFileSpacing;
+    overflow: hidden;
+}
+.weui-uploader__files {
+    list-style: none;
+}
+.weui-uploader__file {
+    float: left;
+    margin-right: @weuiUploaderFileSpacing;
+    margin-bottom: @weuiUploaderFileSpacing;
+    width: @weuiUploaderSize;
+    height: @weuiUploaderSize;
+    background: no-repeat center center;
+    background-size: cover;
+}
+.weui-uploader__file_status {
+    position: relative;
+    &:before {
+        content: " ";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.5); // 固定色值
+    }
+    .weui-uploader__file-content {
+        display: block;
+    }
+}
+.weui-uploader__file-content {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--weui-WHITE);
+    .weui-icon-warn {
+        display: inline-block;
+    }
+}
+.weui-uploader__input-box {
+    float: left;
+    position: relative;
+    margin-right: @weuiUploaderFileSpacing;
+    margin-bottom: @weuiUploaderFileSpacing;
+    width: @weuiUploaderSize;
+    height: @weuiUploaderSize;
+    box-sizing: border-box;
+    background-color: #ededed;
+    .dark({
+        background-color: #2e2e2e;
+    });
+    &:before,
+    &:after {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #a3a3a3;
+        .dark({
+            background-color: #6d6d6d;
+        });
+    }
+    &:before {
+        width: @weuiUploaderBorderWidth + 1;
+        height: @weuiUploaderSize / 3;
+    }
+    &:after {
+        width: @weuiUploaderSize / 3;
+        height: @weuiUploaderBorderWidth + 1;
+    }
+    &:active {
+        &:before,
+        &:after {
+            opacity: 0.7;
+        }
+    }
+}
+.weui-uploader__input {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    .setTapColor();
+}
diff --git a/src/app/style/widget/weui-flex/weui-flex.less b/src/app/style/widget/weui-flex/weui-flex.less
new file mode 100644
index 0000000..536ed51
--- /dev/null
+++ b/src/app/style/widget/weui-flex/weui-flex.less
@@ -0,0 +1,24 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-flex {
+    display: flex;
+}
+.weui-flex__item {
+    flex: 1;
+}
diff --git a/src/app/style/widget/weui-footer/weui-footer.less b/src/app/style/widget/weui-footer/weui-footer.less
new file mode 100644
index 0000000..5dd860a
--- /dev/null
+++ b/src/app/style/widget/weui-footer/weui-footer.less
@@ -0,0 +1,71 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-footer {
+    color: @weuiTextColorTips;
+    font-size: 14px;
+    line-height: 1.4;
+    text-align: center;
+    a,
+    navigator {
+        color: @weuiLinkColorDefault;
+    }
+    navigator {
+        display: inline;
+    }
+}
+.weui-footer_fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-bottom: calc(16px ~"+ constant(safe-area-inset-bottom)");
+    padding-bottom: calc(16px ~"+ env(safe-area-inset-bottom)");
+    left: constant(safe-area-inset-left);
+    left: env(safe-area-inset-left);
+    right: constant(safe-area-inset-right);
+    right: env(safe-area-inset-right);
+}
+.weui-footer__links {
+    font-size: 0;
+}
+.weui-footer__link {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 8px;
+    position: relative;
+    font-size: 14px;
+    &:before {
+        .setLeftLine();
+
+        left: -8px;
+        top: 0.36em;
+        bottom: 0.36em;
+    }
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+}
+.weui-footer__text {
+    padding: 0 16px;
+    font-size: 12px;
+}
diff --git a/src/app/style/widget/weui-grid/weui-grid.less b/src/app/style/widget/weui-grid/weui-grid.less
new file mode 100644
index 0000000..57a10ba
--- /dev/null
+++ b/src/app/style/widget/weui-grid/weui-grid.less
@@ -0,0 +1,74 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-grids {
+    position: relative;
+    overflow: hidden;
+
+    &:before {
+        .setTopLine(@weuiGridBorderColor);
+    }
+    &:after {
+        .setLeftLine(@weuiGridBorderColor);
+    }
+}
+
+.weui-grid {
+    position: relative;
+    float: left;
+    padding: 20px 10px;
+    width: 100% / @weuiGridColumnCount;
+    box-sizing: border-box;
+
+    &:before {
+        .setRightLine(@weuiGridBorderColor);
+    }
+    &:after {
+        .setBottomLine(@weuiGridBorderColor);
+    }
+
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+}
+
+.weui-grid__icon {
+    width: @weuiGridIconSize;
+    height: @weuiGridIconSize;
+    margin: 0 auto;
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    & + .weui-grid__label {
+        margin-top: 4px;
+    }
+}
+
+.weui-grid__label {
+    display: block;
+    text-align: center;
+    color: @weuiTextColorTitle;
+    font-size: @weuiGridFontSize;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
diff --git a/src/app/style/widget/weui-loading/weui-loading.less b/src/app/style/widget/weui-loading/weui-loading.less
new file mode 100644
index 0000000..bed8cce
--- /dev/null
+++ b/src/app/style/widget/weui-loading/weui-loading.less
@@ -0,0 +1,54 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "./weui-primary-loading";
+
+.weui-loading {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    vertical-align: middle;
+    animation: weuiLoading 1s steps(12, end) infinite;
+    background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
+    background-size: 100%;
+
+    &.weui-loading_transparent,
+    .weui-btn_loading.weui-btn_primary & {
+        background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
+    }
+}
+
+@-webkit-keyframes weuiLoading {
+    0% {
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+
+    100% {
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+}
+
+@keyframes weuiLoading {
+    0% {
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+
+    100% {
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+}
+
diff --git a/src/app/style/widget/weui-loading/weui-primary-loading.less b/src/app/style/widget/weui-loading/weui-primary-loading.less
new file mode 100644
index 0000000..88d08cd
--- /dev/null
+++ b/src/app/style/widget/weui-loading/weui-primary-loading.less
@@ -0,0 +1,78 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+// 默认灰色
+.weui-primary-loading{
+  display:inline-flex;
+  position:relative;
+  width:16px;
+  height:16px;
+  vertical-align:middle;
+  color:var(--weui-FG);
+  animation: weuiLoading 1s steps(60,end) infinite;
+
+  &:before,&:after{
+    content:"";
+    display:block;
+    width:8px;
+    height:16px;
+    box-sizing:border-box;
+    border:2px solid;
+    border-color:currentColor;
+    opacity:.5;
+  }
+}
+.weui-primary-loading:before{
+  border-right-width:0;
+  border-top-left-radius:16px;
+  border-bottom-left-radius:16px;
+  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 8%, rgba(0,0,0,.3) 95%);
+}
+.weui-primary-loading:after{
+  border-left-width:0;
+  border-top-right-radius:16px;
+  border-bottom-right-radius:16px;
+  -webkit-mask-image:linear-gradient(225deg, rgba(0,0,0,0) 45% , rgba(0,0,0,.3) 95%);
+}
+.weui-primary-loading__dot{
+  position:absolute;
+  top:0;
+  left:50%;
+  width:1px;
+  height:2px;
+  border-top-right-radius:2px;
+  border-bottom-right-radius:2px;
+  background:currentColor;
+  opacity:.5;
+}
+
+// 默认灰色
+.weui-primary-loading_transparent{
+  color:#FFFFFF;
+}
+
+// 品牌色
+.weui-primary-loading_brand{
+  color:var(--weui-BRAND);
+  .weui-primary-loading__dot,
+  &:before,&:after{
+    opacity:.85;
+  }
+}
+
+
diff --git a/src/app/style/widget/weui-media-box/weui-media-box.less b/src/app/style/widget/weui-media-box/weui-media-box.less
new file mode 100644
index 0000000..95d64bc
--- /dev/null
+++ b/src/app/style/widget/weui-media-box/weui-media-box.less
@@ -0,0 +1,102 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-media-box {
+    padding: 16px;
+    position: relative;
+    &:before {
+        .setTopLine(@weuiLineColorLight);
+
+        left: 16px;
+    }
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+
+    a& {
+        color: #000;
+        .setTapColor();
+        &:active {
+            background-color: @weuiBgColorActive;
+        }
+    }
+}
+.weui-media-box__title {
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 1.4;
+    color: @weuiTextColorTitle;
+    .ellipsis();
+    .hyphens;
+}
+.weui-media-box__desc {
+    color: @weuiTextColorTips;
+    font-size: 14px;
+    line-height: 1.4;
+    padding-top: 4px;
+    .ellipsisLn(2);
+    .hyphens;
+}
+.weui-media-box__info {
+    margin-top: 16px;
+    padding-bottom: 4px;
+    font-size: 13px;
+    color: @weuiTextColorTips;
+    line-height: 1em;
+    list-style: none;
+    overflow: hidden;
+}
+.weui-media-box__info__meta {
+    float: left;
+    padding-right: 1em;
+}
+.weui-media-box__info__meta_extra {
+    padding-left: 1em;
+    border-left: 1px solid @weuiTextColorTips;
+}
+.weui-media-box_appmsg {
+    display: flex;
+    align-items: center;
+    .weui-media-box__hd {
+        margin-right: 16px;
+        width: 60px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+    }
+    .weui-media-box__thumb {
+        width: 100%;
+        max-height: 100%;
+        vertical-align: top;
+    }
+    .weui-media-box__bd {
+        flex: 1;
+        min-width: 0;
+    }
+}
+.weui-media-box_small-appmsg {
+    padding: 0;
+    .weui-cells {
+        margin-top: 0;
+        &:before {
+            display: none;
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-page/weui-article.less b/src/app/style/widget/weui-page/weui-article.less
new file mode 100644
index 0000000..87848b5
--- /dev/null
+++ b/src/app/style/widget/weui-page/weui-article.less
@@ -0,0 +1,50 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-article {
+    padding: 24px 16px;
+    padding: 24px calc(16px ~"+ constant(safe-area-inset-right)") calc(24px ~"+ constant(safe-area-inset-bottom)") calc(16px ~"+ constant(safe-area-inset-left)");
+    padding: 24px calc(16px ~"+ env(safe-area-inset-right)") calc(24px ~"+ env(safe-area-inset-bottom)") calc(16px ~"+ env(safe-area-inset-left)");
+    font-size: 17px;
+    color: var(--weui-FG-0);
+}
+.weui-article__section {
+    margin-bottom: 1.5em;
+}
+.weui-article__h1 {
+    font-size: 22px;
+    font-weight:700;
+    margin-bottom: .9em;
+    line-height:1.4;
+}
+.weui-article__h2 {
+    font-size: 17px;
+    font-weight:700;
+    margin-bottom: .34em;
+    line-height:1.4;
+}
+.weui-article__h3 {
+    font-weight:700;
+    font-size: 15px;
+    margin-bottom: .34em;
+    line-height:1.4;
+}
+.weui-article__p {
+    margin: 0 0 .8em;
+}
+
diff --git a/src/app/style/widget/weui-page/weui-form.less b/src/app/style/widget/weui-page/weui-form.less
new file mode 100644
index 0000000..43cf6cf
--- /dev/null
+++ b/src/app/style/widget/weui-page/weui-form.less
@@ -0,0 +1,81 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "../weui-cell/weui-cells__group";
+
+.weui-form {
+    padding: 56px 0 0;
+    padding: calc(56px ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
+    padding: calc(56px ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    display: flex;
+    flex-direction: column;
+    line-height: 1.4;
+    min-height: 100%;
+    box-sizing: border-box;
+    background-color: var(--weui-BG-2);
+
+    .weui-footer,
+    .weui-footer__link {
+        font-size: 14px;
+    }
+    .weui-agree {
+        padding: 0;
+    }
+}
+.weui-form__text-area {
+    padding: 0 32px;
+    color: var(--weui-FG-0);
+    text-align: center;
+}
+.weui-form__control-area {
+    flex: 1;
+    margin: 48px 0;
+}
+.weui-form__tips-area {
+    overflow: hidden;
+}
+.weui-form__tips-area,
+.weui-form__extra-area {
+    margin-bottom: 24px;
+    text-align: center;
+}
+.weui-form__opr-area {
+    margin-bottom: 64px;
+    &:last-child {
+        margin-bottom: 96px;
+    }
+}
+.weui-form__title {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1.36;
+}
+.weui-form__desc {
+    font-size: 17px;
+    margin-top: 16px;
+}
+.weui-form__tips {
+    color: @weuiTextColorDesc;
+    font-size: 14px;
+    a,
+    navigator {
+        color: @weuiLinkColorDefault;
+    }
+    navigator {
+        display: inline;
+    }
+}
diff --git a/src/app/style/widget/weui-page/weui-msg.less b/src/app/style/widget/weui-page/weui-msg.less
new file mode 100644
index 0000000..c306b49
--- /dev/null
+++ b/src/app/style/widget/weui-page/weui-msg.less
@@ -0,0 +1,101 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "../weui-button/weui-button";
+
+.weui-msg {
+    padding-top: @weuiMsgPaddingTop;
+    padding: calc(@weuiMsgPaddingTop ~"+ constant(safe-area-inset-top)") constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
+    padding: calc(@weuiMsgPaddingTop ~"+ env(safe-area-inset-top)") env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    text-align: center;
+    line-height: 1.4;
+    min-height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--weui-BG-2);
+    a:not(.weui-btn) {
+        color: @weuiLinkColorDefault;
+        display: inline-block;
+        vertical-align: baseline;
+    }
+}
+.weui-msg__icon-area {
+    margin-bottom: 32px;
+}
+.weui-msg__text-area {
+    margin-bottom: 32px;
+    padding: 0 32px;
+    flex: 1;
+    line-height: 1.6;
+    .hyphens;
+    &:first-child { padding-top: 96px; }
+}
+.weui-msg__title {
+    margin-bottom: @weuiMsgTitleGap;
+    font-weight: 700;
+    font-size: 22px;
+    color: @weuiTextColorTitle;
+}
+.weui-msg__desc {
+    font-size: 17px;
+    color: @weuiTextColorTitle;
+    margin-bottom: 16px;
+}
+.weui-msg__desc-primary {
+    font-size: 14px;
+    color: @weuiTextColorDesc;
+    margin-bottom: 16px;
+}
+.weui-msg__opr-area {
+    margin-bottom: 16px;
+    .weui-btn-area { margin: 0; }
+    .weui-btn + .weui-btn { margin-bottom: 16px; }
+    &:last-child { margin-bottom: 96px; }
+    & + .weui-msg__extra-area {
+        margin-top: 48px;
+    }
+}
+.weui-msg__tips-area {
+    margin-bottom: 16px;
+    padding: 0 40px;
+    .hyphens;
+    .weui-msg__opr-area + & {
+        margin-bottom: 48px;
+    }
+    &:last-child {
+        margin-bottom: 64px;
+    }
+}
+.weui-msg__tips {
+    font-size: 12px;
+    color: @weuiTextColorDesc;
+}
+.weui-msg__extra-area {
+    margin-bottom: 24px;
+    font-size: 12px;
+    color: @weuiTextColorDesc;
+    a,
+    navigator {
+        color: @weuiLinkColorDefault;
+    }
+    navigator {
+        display: inline;
+    }
+}
+
+
diff --git a/src/app/style/widget/weui-panel/weui-panel.less b/src/app/style/widget/weui-panel/weui-panel.less
new file mode 100644
index 0000000..6b6f7c3
--- /dev/null
+++ b/src/app/style/widget/weui-panel/weui-panel.less
@@ -0,0 +1,52 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+
+.weui-panel {
+    background-color: var(--weui-BG-2);
+    margin-top: 10px;
+    &:first-child {
+        margin-top: 0;
+    }
+
+    position: relative;
+    overflow: hidden;
+    &:before {
+        .setTopLine(@weuiLineColorLight);
+    }
+    &:after {
+        .setBottomLine(@weuiLineColorLight);
+    }
+}
+
+.weui-panel__hd {
+    padding: 16px 16px 13px;
+    color: @weuiTextColorTitle;
+    font-size: 15px;
+    font-weight: 700;
+    position: relative;
+    &:after {
+        .setBottomLine(@weuiLineColorLight);
+
+        left: 15px;
+    }
+}
+
+
+
+
diff --git a/src/app/style/widget/weui-picker/weui-picker.less b/src/app/style/widget/weui-picker/weui-picker.less
new file mode 100644
index 0000000..4f33f4e
--- /dev/null
+++ b/src/app/style/widget/weui-picker/weui-picker.less
@@ -0,0 +1,129 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+@pickerItemHeight: 48px;
+.weui-picker {
+    position: fixed;
+    width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    bottom: 0;
+    z-index: 5000;
+    background-color: var(--weui-BG-2);
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    backface-visibility: hidden;
+    transform: translate(0, 100%);
+    //slide up animation
+    transition: transform 0.3s;
+}
+
+.weui-picker__hd {
+    display: flex;
+    padding: 16px;
+    padding: 16px calc(16px ~"+ constant(safe-area-inset-right)") 16px calc(16px ~"+ constant(safe-area-inset-left)");
+    padding: 16px calc(16px ~"+ env(safe-area-inset-right)") 16px calc(16px ~"+ env(safe-area-inset-left)");
+    position: relative;
+    text-align: center;
+    font-size: 17px;
+    line-height: 1.4;
+    &:after {
+        .setBottomLine(@weuiLineColorLight);
+    }
+}
+
+.weui-picker__bd {
+    display: flex;
+    position: relative;
+    background-color: var(--weui-BG-2);
+    height: 240px;
+    overflow: hidden;
+}
+
+.weui-picker__group {
+    flex: 1;
+    position: relative;
+    height: 100%;
+    &:first-child {
+        .weui-picker__item {
+            padding-left: constant(safe-area-inset-left);
+            padding-left: env(safe-area-inset-left);
+        }
+    }
+    &:last-child {
+        .weui-picker__item {
+            padding-right: constant(safe-area-inset-right);
+            padding-right: env(safe-area-inset-right);
+        }
+    }
+}
+
+.weui-picker__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    z-index: 3;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+    .dark({
+        background-image: linear-gradient(180deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6)), linear-gradient(0deg, rgba(25, 25, 25, 0.95), rgba(25, 25, 25, 0.6));
+    });
+    
+    background-position: top, bottom;
+    background-size: 100% 92px;
+    background-repeat: no-repeat;
+    transform: translateZ(0);
+}
+
+.weui-picker__indicator {
+    width: 100%;
+    height: 56px;
+    position: absolute;
+    left: 0;
+    top: 92px;
+    z-index: 3;
+    &:before {
+        .setTopLine(@weuiLineColorLight);
+    }
+    &:after {
+        .setBottomLine(@weuiLineColorLight);
+    }
+}
+
+.weui-picker__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.weui-picker__item {
+    height: @pickerItemHeight;
+    line-height: @pickerItemHeight;
+    text-align: center;
+    color: @weuiTextColorTitle;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.weui-picker__item_disabled {
+    color: @weuiTextColorDesc;
+}
diff --git a/src/app/style/widget/weui-progress/weui-progress.less b/src/app/style/widget/weui-progress/weui-progress.less
new file mode 100644
index 0000000..281b458
--- /dev/null
+++ b/src/app/style/widget/weui-progress/weui-progress.less
@@ -0,0 +1,40 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-progress {
+    display: flex;
+    align-items: center;
+}
+
+.weui-progress__bar {
+    background-color: @weuiProgressBg;
+    height: @weuiProgressHeight;
+    flex: 1;
+}
+
+.weui-progress__inner-bar {
+    width: 0;
+    height: 100%;
+    background-color: @weuiProgressColor;
+}
+
+.weui-progress__opr {
+    display: block;
+    margin-left: 15px;
+    font-size: 0;
+}
diff --git a/src/app/style/widget/weui-searchbar/weui-searchbar.less b/src/app/style/widget/weui-searchbar/weui-searchbar.less
new file mode 100644
index 0000000..66ff5ee
--- /dev/null
+++ b/src/app/style/widget/weui-searchbar/weui-searchbar.less
@@ -0,0 +1,128 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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.
+*/
+
+@weuiSearchInputHeight:32px;
+
+@import "../../base/fn";
+.weui-search-bar {
+    position: relative;
+    padding: 8px;
+    display: flex;
+    box-sizing: border-box;
+    background-color: @weuiBgColorDefault;
+    -webkit-text-size-adjust: 100%;
+    align-items: center;
+    &.weui-search-bar_focusing {
+        .weui-search-bar__cancel-btn {
+            display: block;
+        }
+        .weui-search-bar__label {
+            display: none;
+        }
+    }
+
+    .weui-icon-search {
+        width: 16px;
+        height: 16px;
+    }
+}
+.weui-search-bar__form {
+    position: relative;
+    flex: auto;
+    background-color: var(--weui-BG-2);
+    border-radius: 4px;
+}
+.weui-search-bar__box {
+    position: relative;
+    padding-left: 28px;
+    padding-right: 32px;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 1;
+    .weui-search-bar__input {
+        padding: 8px 0;
+        width: 100%;
+        height: unit(@weuiSearchInputHeight - 16px)/14em;
+        border: 0;
+        font-size: 14px;
+        line-height: unit(@weuiSearchInputHeight - 16px)/14em;
+        box-sizing: content-box;
+        background: transparent;
+        caret-color: @weuiColorPrimary;
+        color: @weuiTextColorTitle;
+        &:focus {
+            outline: none;
+        }
+    }
+    .weui-icon-search {
+        position: absolute;
+        top: 50%;
+        left: 8px;
+        margin-top: -8px;
+    }
+    .weui-icon-clear {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        margin-top: -16px;
+        padding: 8px;
+        width: 16px;
+        height: 16px;
+        mask-size: 16px;
+    }
+}
+.weui-search-bar__label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    font-size: 0;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @weuiTextColorDesc;
+    background: var(--weui-BG-2);
+    span {
+        display: inline-block;
+        font-size: 14px;
+        vertical-align: middle;
+    }
+    .weui-icon-search {
+        margin-right: 4px;
+    }
+}
+.weui-search-bar__cancel-btn {
+    display: none;
+    margin-left: 8px;
+    line-height: 28px;
+    color: @weuiLinkColorDefault;
+    white-space: nowrap;
+}
+.weui-search-bar__input:not(:valid) + .weui-icon-clear {
+    display: none;
+}
+
+//干掉input[search]默认的clear button
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+}
diff --git a/src/app/style/widget/weui-slider/weui-slider.less b/src/app/style/widget/weui-slider/weui-slider.less
new file mode 100644
index 0000000..02b5341
--- /dev/null
+++ b/src/app/style/widget/weui-slider/weui-slider.less
@@ -0,0 +1,63 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-slider {
+    padding: 15px 18px;
+    user-select: none;
+}
+
+.weui-slider__inner {
+    position: relative;
+    height: 2px;
+    background-color: @weuiLineColorLight;
+}
+
+.weui-slider__track {
+    height: 2px;
+    background-color: @weuiColorPrimary;
+    width: 0;
+}
+
+.weui-slider__handler {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 28px;
+    height: 28px;
+    margin-left: -14px;
+    margin-top: -14px;
+    border-radius: 50%;
+    background-color: #fff; // 固定色值
+    box-shadow: 0 0 4px var(--weui-FG-3);
+}
+
+
+.weui-slider-box {
+    display: flex;
+    align-items: center;
+    .weui-slider {
+        flex: 1;
+    }
+}
+.weui-slider-box__value {
+    margin-left: 0.5em;
+    min-width: 24px;
+    color: @weuiTextColorDesc;
+    text-align: center;
+    font-size: 14px;
+}
diff --git a/src/app/style/widget/weui-tab/weui-navbar.less b/src/app/style/widget/weui-tab/weui-navbar.less
new file mode 100644
index 0000000..8b7771a
--- /dev/null
+++ b/src/app/style/widget/weui-tab/weui-navbar.less
@@ -0,0 +1,72 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-navbar {
+    display: flex;
+    position: relative;
+    z-index: 500;
+    background-color: var(--weui-BG-2);
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+
+    &:after {
+        .setBottomLine(@weuiLineColorLight);
+    }
+
+    & + .weui-tab__panel {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}
+
+.weui-navbar__item {
+    position: relative;
+    display: block;
+    flex: 1;
+    padding: 16px 0;
+    padding-top: calc(16px ~"+ constant(safe-area-inset-top)");
+    padding-top: calc(16px ~"+ env(safe-area-inset-top)");
+    text-align: center;
+    font-size: 17px;
+    line-height: unit((@weuiNavBarHeight - 32) / 17);
+    .setTapColor();
+
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+
+    &.weui-bar__item_on {
+        background-color: @weuiBgColorActive;
+    }
+
+    &:after {
+        .setRightLine(@weuiLineColorLight);
+    }
+
+    &:first-child {
+        padding-left: constant(safe-area-inset-left);
+        padding-left: env(safe-area-inset-left);
+    }
+    &:last-child {
+        padding-right: constant(safe-area-inset-right);
+        padding-right: env(safe-area-inset-right);
+        &:after {
+            display: none;
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-tab/weui-tab.less b/src/app/style/widget/weui-tab/weui-tab.less
new file mode 100644
index 0000000..07a610f
--- /dev/null
+++ b/src/app/style/widget/weui-tab/weui-tab.less
@@ -0,0 +1,36 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@import "weui-tabbar";
+@import "weui-navbar";
+
+.weui-tab {
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    flex-direction: column;
+}
+
+.weui-tab__panel {
+    box-sizing: border-box;
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.weui-tab__content {
+    display: none;
+}
diff --git a/src/app/style/widget/weui-tab/weui-tabbar.less b/src/app/style/widget/weui-tab/weui-tabbar.less
new file mode 100644
index 0000000..d80c00d
--- /dev/null
+++ b/src/app/style/widget/weui-tab/weui-tabbar.less
@@ -0,0 +1,82 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-tabbar {
+    display: flex;
+    position: relative;
+    z-index: 500;
+    background-color: @weuiBgColorPrimary;
+
+    &:before {
+        .setTopLine(@weuiLineColorLight);
+    }
+}
+
+.weui-tabbar__item {
+    display: block;
+    flex: 1;
+    padding: 8px 0;
+    padding-bottom: calc(8px ~"+ constant(safe-area-inset-bottom)");
+    padding-bottom: calc(8px ~"+ env(safe-area-inset-bottom)");
+    font-size: 0;
+    color: @weuiTextColorDesc;
+    text-align: center;
+    .setTapColor();
+
+    &:first-child {
+        padding-left: constant(safe-area-inset-left);
+        padding-left: env(safe-area-inset-left);
+    }
+    &:last-child {
+        padding-right: constant(safe-area-inset-right);
+        padding-right: env(safe-area-inset-right);
+    }
+
+    &.weui-bar__item_on {
+        .weui-tabbar__icon,
+        .weui-tabbar__icon > i,
+        .weui-tabbar__label {
+            color: @weuiColorPrimary;
+        }
+    }
+}
+
+.weui-tabbar__icon {
+    display: inline-block;
+    width: @weuiTabBarHeight - 8*2 - 10*1.4 - 2;
+    height: @weuiTabBarHeight - 8*2 - 10*1.4 - 2;
+    margin-bottom: 2px;
+
+
+    i&,
+    > i {
+        font-size: 24px;
+        color: @weuiTextColorDesc;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.weui-tabbar__label {
+    color: @weuiTextColorTitle;
+    font-size: 10px;
+    line-height: 1.4;
+}
diff --git a/src/app/style/widget/weui-text/weui-link.less b/src/app/style/widget/weui-text/weui-link.less
new file mode 100644
index 0000000..7c042f3
--- /dev/null
+++ b/src/app/style/widget/weui-text/weui-link.less
@@ -0,0 +1,25 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-link {
+    color: @weuiLinkColorDefault;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    &:visited {
+        color: @weuiLinkColorDefault;
+    }
+}
diff --git a/src/app/style/widget/weui-tips/weui-actionsheet.less b/src/app/style/widget/weui-tips/weui-actionsheet.less
new file mode 100644
index 0000000..a8c4280
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-actionsheet.less
@@ -0,0 +1,132 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+@weuiActionSheetAndroidBorderRadius: 2px;
+
+.weui-actionsheet {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    transform: translate(0, 100%);
+    backface-visibility: hidden;
+    z-index: 5000;
+    width: 100%;
+    background-color: @weuiBgColorPrimary;
+    //slide up animation
+    transition: transform 0.3s;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    overflow: hidden;
+}
+.weui-actionsheet__title {
+    position: relative;
+    height: 56px;
+    padding: 0 24px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    font-size: 12px;
+    color: @weuiTextColorDesc;
+    line-height: 1.4;
+    background: var(--weui-BG-2);
+    &:before {
+        .setBottomLine(@weuiCellBorderColor);
+    }
+    .weui-actionsheet__title-text {
+        .ellipsisLn(2);
+    }
+}
+.weui-actionsheet__menu {
+    color: @weuiTextColorTitle;
+    background-color: var(--weui-BG-2);
+}
+.weui-actionsheet__action {
+    margin-top: 8px;
+    background-color: var(--weui-BG-2);
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+.weui-actionsheet__cell {
+    position: relative;
+    padding: @weuiCellGapV;
+    text-align: center;
+    font-size: 17px;
+    line-height: @weuiCellLineHeight;
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+    }
+    &:active {
+        background-color: @weuiBgColorActive;
+    }
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+}
+.weui-actionsheet__cell_warn {
+    color: @weuiColorWarn;
+}
+
+
+//android actionSheet
+.weui-skin_android {
+    .weui-actionsheet {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        bottom: auto;
+        transform: translate(-50%, -50%);
+        //padding: 0 40px;
+        width: 274px;
+        box-sizing: border-box;
+        backface-visibility: hidden;
+        background: transparent;
+        //slide up animation
+        transition: transform 0.3s;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .weui-actionsheet__action {
+        display: none;
+    }
+    .weui-actionsheet__menu {
+        border-radius: @weuiActionSheetAndroidBorderRadius;
+        box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+    }
+    .weui-actionsheet__cell {
+        padding: @weuiCellGapV;
+        font-size: 17px;
+        line-height: @weuiCellLineHeight;
+        color: @weuiTextColorTitle;
+        text-align: left;
+        &:first-child {
+            border-top-left-radius: @weuiActionSheetAndroidBorderRadius;
+            border-top-right-radius: @weuiActionSheetAndroidBorderRadius;
+        }
+        &:last-child {
+            border-bottom-left-radius: @weuiActionSheetAndroidBorderRadius;
+            border-bottom-right-radius: @weuiActionSheetAndroidBorderRadius;
+        }
+    }
+}
+
+//actionSheet aniamtion
+.weui-actionsheet_toggle {
+    transform: translate(0, 0);
+}
diff --git a/src/app/style/widget/weui-tips/weui-badge.less b/src/app/style/widget/weui-tips/weui-badge.less
new file mode 100644
index 0000000..18865ed
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-badge.less
@@ -0,0 +1,34 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-badge {
+    display: inline-block;
+    padding: 0.15em 0.4em;
+    min-width: 8px;
+    border-radius: 18px;
+    background-color: @weuiColorWarn;
+    color: #fff; // 固定色值
+    line-height: 1.2;
+    text-align: center;
+    font-size: 12px;
+    vertical-align: middle;
+}
+.weui-badge_dot {
+    padding: 0.4em;
+    min-width: 0;
+}
diff --git a/src/app/style/widget/weui-tips/weui-dialog.less b/src/app/style/widget/weui-tips/weui-dialog.less
new file mode 100644
index 0000000..3baa0fc
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-dialog.less
@@ -0,0 +1,157 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-dialog {
+    position: fixed;
+    z-index: 5000;
+    top: 50%;
+    left: 16px;
+    right: 16px;
+    transform: translate(0, -50%);
+    background-color: @weuiDialogBackgroundColor;
+    text-align: center;
+    border-radius: 12px;
+    overflow: hidden;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    max-height: 90%;
+}
+.weui-dialog__hd {
+    padding: 32px @weuiDialogGapWidth 16px;
+}
+.weui-dialog__title {
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 1.4;
+}
+.weui-dialog__bd {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 0 @weuiDialogGapWidth;
+    margin-bottom: 32px;
+    font-size: 17px;
+    line-height: 1.4;
+    .hyphens;
+
+    color: @weuiTextColorDesc;
+    &:first-child {
+        min-height: 40px;
+        padding: 32px @weuiDialogGapWidth 0;
+        font-weight: 700;
+        color: @weuiTextColorTitle;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+    }
+}
+.weui-dialog__ft {
+    position: relative;
+    line-height: 56px;
+    min-height: 56px;
+    font-size: 17px;
+    display: flex;
+    &:after {
+        content: " ";
+        .setTopLine(@weuiDialogLineColor);
+    }
+}
+.weui-dialog__btn {
+    display: block;
+    flex: 1;
+    color: @weuiDialogLinkColor;
+    font-weight: 700;
+    text-decoration: none;
+    .setTapColor();
+    &:active {
+        background-color: @weuiDialogLinkActiveBc;
+    }
+
+    position: relative;
+    &:after {
+        content: " ";
+        .setLeftLine(@weuiDialogLineColor);
+    }
+    &:first-child {
+        &:after {
+            display: none;
+        }
+    }
+}
+.weui-dialog__btn_default {
+    color: var(--weui-FG-HALF);
+}
+
+.weui-skin_android {
+    .weui-dialog {
+        text-align: left;
+        box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1);
+    }
+    .weui-dialog__title {
+        font-size: 22px;
+        line-height: 1.4;
+    }
+    .weui-dialog__hd {
+        text-align: left;
+    }
+    .weui-dialog__bd {
+        color: @weuiTextColorDesc;
+        text-align: left;
+        &:first-child {
+            color: @weuiTextColorTitle;
+        }
+    }
+    .weui-dialog__ft {
+        display: block;
+        text-align: right;
+        line-height: 40px;
+        min-height: 40px;
+        padding: 0 @weuiDialogGapWidth 16px;
+        &:after {
+            display: none;
+        }
+    }
+    .weui-dialog__btn {
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 0.8em;
+        &:after {
+            display: none;
+        }
+        &:last-child {
+            margin-right: -0.8em;
+        }
+    }
+    .weui-dialog__btn_default {
+        color: var(--weui-FG-HALF);
+    }
+}
+
+@media screen and (min-width: 352px) {
+    .weui-dialog {
+        width: 320px;
+        margin: 0 auto;
+    }
+}
diff --git a/src/app/style/widget/weui-tips/weui-half-screen-dialog.less b/src/app/style/widget/weui-tips/weui-half-screen-dialog.less
new file mode 100644
index 0000000..8484137
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -0,0 +1,157 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-half-screen-dialog {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: 75%;
+    z-index: 5000;
+    line-height: 1.4;
+    background-color: var(--weui-BG-2);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    overflow: hidden;
+    padding: 0 24px;
+    padding: 0 calc(24px ~"+ constant(safe-area-inset-right)") constant(safe-area-inset-bottom) calc(24px ~"+ constant(safe-area-inset-left)");
+    padding: 0 calc(24px ~"+ env(safe-area-inset-right)") env(safe-area-inset-bottom) calc(24px ~"+ env(safe-area-inset-left)");
+
+    @media only screen and (max-height: 558px) {
+        max-height: none;
+    }
+}
+.weui-half-screen-dialog__hd {
+    font-size: 8px;
+    height: 8em;
+    display: flex;
+    align-items: center;
+
+    .weui-icon-btn {
+        position: absolute;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        &:active { opacity: 0.5; }
+    }
+}
+.weui-half-screen-dialog__hd__side {
+    position: relative;
+    left: -8px;
+}
+.weui-half-screen-dialog__hd__main {
+    flex: 1;
+    .weui-half-screen-dialog__hd__side + & {
+        text-align: center;
+        padding: 0 40px;
+    }
+    & + .weui-half-screen-dialog__hd__side {
+        right: -8px;
+        left: auto;
+        .weui-icon-btn {
+            right: 0;
+        }
+    }
+}
+.weui-half-screen-dialog__title {
+    display: block;
+    color: var(--weui-FG-0);
+    font-weight: 700;
+    font-size: 15px;
+}
+.weui-half-screen-dialog__subtitle {
+    display: block;
+    color: var(--weui-FG-1);
+    font-size: 10px;
+}
+
+.weui-half-screen-dialog__bd {
+    .hyphens();
+
+    overflow-y: auto;
+    padding-top: 4px;
+    padding-bottom: 40px;
+    font-size: 14px;
+    color: var(--weui-FG-0);
+}
+.weui-half-screen-dialog__desc {
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--weui-FG-0);
+    line-height: 1.4;
+}
+.weui-half-screen-dialog__tips {
+    padding-top: 16px;
+    font-size: 14px;
+    color: var(--weui-FG-2);
+    line-height: 1.4;
+}
+.weui-half-screen-dialog__ft {
+    padding: 0 24px 32px;
+    text-align: center;
+    .weui-btn:nth-last-child(n+2),
+    .weui-btn:nth-last-child(n+2) + .weui-btn {
+        display: inline-block;
+        vertical-align: top;
+        margin: 0 8px;
+        width: 120px;
+    }
+}
+
+.weui-icon-btn {
+    outline: 0;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    border-width: 0;
+    background-color: transparent;
+    color: var(--weui-FG-0);
+    font-size: 0;
+}
+.weui-icon-more {
+    display: inline-block;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M5 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: currentColor;
+    color: @weuiTextColorTitle;
+}
+.weui-icon-btn_goback {
+    color: @weuiTextColorTitle;
+    display: inline-block;
+    vertical-align: middle;
+    width: 12px;
+    height: 24px;
+    mask: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019.438L8.955%2020.5l-7.666-7.79a1.02%201.02%200%20010-1.42L8.955%203.5%2010%204.563%202.682%2012%2010%2019.438z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: currentColor;
+}
+.weui-icon-btn_close {
+    color: @weuiTextColorTitle;
+    display: inline-block;
+    vertical-align: middle;
+    width: 14px;
+    height: 24px;
+    mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: currentColor;
+}
diff --git a/src/app/style/widget/weui-tips/weui-loadmore.less b/src/app/style/widget/weui-tips/weui-loadmore.less
new file mode 100644
index 0000000..2fd4612
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-loadmore.less
@@ -0,0 +1,64 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-loadmore {
+    width: 65%;
+    margin: 20px auto;
+    text-align: center;
+    font-size:0;
+
+    .weui-loading,
+    .weui-primary-loading{
+      margin-right:8px;
+    }
+}
+.weui-loadmore__tips {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 1.6;
+    color: @weuiTextColorTitle;
+}
+
+.weui-loadmore_line {
+    border-top: 1px solid @weuiLineColorLight;
+    margin-top: 32px;
+    .weui-loadmore__tips {
+        position: relative;
+        top: -0.9em;
+        padding: 0 0.55em;
+        background-color: var(--weui-BG-2);
+        color: @weuiTextColorDesc;
+    }
+}
+.weui-loadmore_dot {
+    .weui-loadmore__tips {
+        padding: 0 0.16em;
+        &:before {
+            content: " ";
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background-color: @weuiLineColorLight;
+            display: inline-block;
+            position: relative;
+            vertical-align: 0;
+            top: -0.16em;
+        }
+    }
+}
diff --git a/src/app/style/widget/weui-tips/weui-mask.less b/src/app/style/widget/weui-tips/weui-mask.less
new file mode 100644
index 0000000..e04eb82
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-mask.less
@@ -0,0 +1,36 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+.weui-mask_transparent {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
diff --git a/src/app/style/widget/weui-tips/weui-toast.less b/src/app/style/widget/weui-tips/weui-toast.less
new file mode 100644
index 0000000..5a9ca6d
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-toast.less
@@ -0,0 +1,71 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-toast {
+    position: fixed;
+    z-index: 5000;
+    width: 136px;
+    height: 136px;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--weui-BG-4);
+    box-sizing:border-box;
+    line-height:1.4;
+}
+.weui-toast_text {
+  height:auto;
+  min-width:152px;
+  max-width:216px;
+  padding:12px 0;
+  .weui-toast__content {
+    font-size:14px;
+  }
+}
+.weui-icon_toast {
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin-bottom:16px;
+    &.weui-icon-success-no-circle {
+        color: rgba(255, 255, 255, 0.9);
+    }
+    &.weui-icon-warn {
+        color: rgba(255, 255, 255, 0.9);
+    }
+    &.weui-loading {
+      width:36px;
+      height:36px;
+    }
+    &.weui-primary-loading {
+      .setWeuiPrimaryLoading(36px);
+    }
+}
+
+.weui-toast__content {
+    font-size: 17px;
+    padding:0 12px;
+    .hyphens;
+}
diff --git a/src/app/style/widget/weui-tips/weui-toptips.less b/src/app/style/widget/weui-tips/weui-toptips.less
new file mode 100644
index 0000000..d72f11b
--- /dev/null
+++ b/src/app/style/widget/weui-tips/weui-toptips.less
@@ -0,0 +1,36 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* 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 "../../base/fn";
+
+.weui-toptips {
+    display: none;
+    position: fixed;
+    transform: translateZ(0);
+    top: 8px;
+    left: 8px;
+    right: 8px;
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 14px;
+    text-align: center;
+    color: #fff; // 固定色值
+    z-index: 5000;
+    .text_wrap();
+}
+.weui-toptips_warn {
+    background-color: @weuiColorWarn;
+}
diff --git a/src/build.gleam b/src/build.gleam
index 2b26915..a999c57 100644
--- a/src/build.gleam
+++ b/src/build.gleam
@@ -11,11 +11,8 @@ pub fn bundle_build(entry f: String, outfile o: String) -> Promise(Result(Nil, S
 @external(javascript, "./build_ffi.mjs", "js_build")
 pub fn js_build(content c: String, outfile o: String) -> Promise(Result(Nil, String))
 
-@external(javascript, "./build_ffi.mjs", "json_build")
-pub fn json_build(json f: String, outfile o: String) -> Promise(Result(Nil, String))
-
-@external(javascript, "./build_ffi.mjs", "wxml_build")
-pub fn wxml_build(wxml f: String, outfile o: String) -> Promise(Result(Nil, String))
+@external(javascript, "./build_ffi.mjs", "copy_build")
+pub fn copy_build(json f: String, outfile o: String) -> Promise(Result(Nil, String))
 
 @external(javascript, "./build_ffi.mjs", "less_build")
 pub fn less_build(less f: String, outfile o: String) -> Promise(Result(Nil, String))
@@ -23,7 +20,7 @@ pub fn less_build(less f: String, outfile o: String) -> Promise(Result(Nil, Stri
 const entry = "./build/dev/javascript/wechat_dev_tools/bundle.mjs"
 const app_content = "import { app } from './bundle.mjs'; app()"
 const dist = "./dist/"
-const src = "./src/"
+const src = "./src/app/"
 
 pub type Builder = fn(String, String) -> Promise(Result(Nil, String))
 
@@ -37,7 +34,7 @@ fn file_path(path: String, p: String, t: String) -> String {
 
 fn page_content(p: String) -> String {
   string.concat([
-    "improt { pages, page } from './bundle.mjs'; page(pages(), \"",
+    "import { pages, page } from '../../bundle.mjs'; page(pages(), \"",
     p,
     "\")",
   ])
@@ -49,15 +46,15 @@ fn bundle_asset() -> List(Asset) {
 
 fn app_assets() -> List(Asset) {
   [ Asset(app_content, dist <> "app.js", js_build),
-    Asset(src <> "app.json", dist <> "app.json", json_build),
-    Asset(src <> "less", dist <> "app.wxss", less_build) ]
+    Asset(src <> "app.json", dist <> "app.json", copy_build),
+    Asset(src <> "app.less", dist <> "app.wxss", less_build) ]
 }
 
 fn page_assets(p: String) -> List(Asset) {
-  [ Asset(page_content(p), file_path(dist, p, "js"), js_build),
-    Asset(file_path(src, p, "json"), file_path(dist, p, "json"), json_build),
-    Asset(file_path(src, p, "wxml"), file_path(dist, p, "wxml"), wxml_build),
-    Asset(file_path(src, p, "less"), file_path(dist, p, "wxss"), less_build) ]
+  [ Asset(page_content(p), file_path(dist <> "/pages/", p, "js"), js_build),
+    Asset(file_path(src <> "/pages/", p, "json"), file_path(dist <> "/pages/", p, "json"), copy_build),
+    Asset(file_path(src <> "/pages/", p, "wxml"), file_path(dist <> "/pages/", p, "wxml"), copy_build),
+    Asset(file_path(src <> "/pages/", p, "less"), file_path(dist <> "/pages/", p, "wxss"), less_build) ]
 }
 
 fn pages_assets() -> List(Asset) {
diff --git a/src/build_ffi.mjs b/src/build_ffi.mjs
index d60f1dd..52ad01e 100644
--- a/src/build_ffi.mjs
+++ b/src/build_ffi.mjs
@@ -1,50 +1,55 @@
 import { build } from 'esbuild'
+import { Ok, Error } from "./gleam.mjs"
 import { lessLoader } from 'esbuild-plugin-less';
 
-export async function bundle_build(entry, out) {
-  await build({
-    entryPoints: [entry],
-    bundle: true,
-    minify: true,
-    format: 'esm',
-    outfile: out,
+export function bundle_build(entry, out) {
+  return new Promise(resolve => {
+    let b = build({
+      entryPoints: [entry],
+      bundle: true,
+      minify: true,
+      format: 'esm',
+      outfile: out,
+    })
+    resolve(new Ok(undefined))
   })
 }
 
-export async function js_build(js, out) {
-  await build({
-    stdin: {
-      contents: js,
-      loader: 'js',
-    },
-    bundle: false,
-    minify: false,
-    format: 'esm',
-    outfile: out,
+export function js_build(js, out) {
+  return new Promise(resolve => {
+    let b = build({
+      stdin: {
+        contents: js,
+        loader: 'js',
+      },
+      bundle: false,
+      minify: false,
+      format: 'esm',
+      outfile: out,
+    })
+    resolve(new Ok(undefined))
   })
 }
 
-export async function wxml_build(wxml, out) {
-  await build({
-    entryPoints: [wxml],
-    loader: 'txt',
-    outfile: out,
+export function copy_build(src, out) {
+  return new Promise(resolve => {
+    let b = build({
+      entryPoints: [src],
+      loader: {'.wxml': 'copy', '.json': 'copy'},
+      outfile: out,
+    })
+    resolve(new Ok(undefined))
   })
 }
 
-export async function json_build(json, out) {
-  await build({
-    entryPoints: [json],
-    loader: 'json',
-    outfile: out,
-  })
-}
-
-export async function less_build(css, out) {
-  await build({
-    entryPoints: [css],
-    plugins: [lessLoader()],
-    loader: 'css',
-    outfile: out,
+export function less_build(css, out) {
+  return new Promise(resolve => {
+    let b = build({
+      entryPoints: [css],
+      plugins: [lessLoader()],
+      loader: {'.less': 'css'},
+      outfile: out,
+    })
+    resolve(new Ok(undefined))
   })
 }