diff --git a/app.json b/app.json
index ff0aff4..37cad50 100644
--- a/app.json
+++ b/app.json
@@ -1,21 +1,22 @@
 {
-  "pages":[
+  "pages": [
+    "pages/component/view/view",
     "pages/component/index/index",
     "pages/API/index/index"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json",
   "tabBar": {
-    "color":  "#7A7E83",
+    "color": "#7A7E83",
     "selectedColor": "#3cc51f",
-    "borderStyle":  "black",
-    "backgroundColor":  "#F7F7F7",
+    "borderStyle": "black",
+    "backgroundColor": "#F7F7F7",
     "list": [
       {
         "pagePath": "pages/component/index/index",
@@ -31,4 +32,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/app.wxss b/app.wxss
index 06c6fc9..80c1d08 100644
--- a/app.wxss
+++ b/app.wxss
@@ -1,10 +1,255 @@
-/**app.wxss**/
-.container {
+@import "./pages/common/lib/weui.wxss";
+
+
+/* reset */
+page {
+  background-color: var(--weui-BG-1);
   height: 100%;
+  /* font-size: 16px; */
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--weui-FG-0);
+  display: flex;
+  justify-content: center;
+}
+page>view {
+  width: 100vw;
+  max-width: 600px;
+}
+checkbox, radio{
+  margin-right: 5px;
+}
+button{
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+form{
+  width: 100%;
+}
+input {
+  width: 100%;
+}
+
+/* lib */
+.strong{
+  font-weight: bold;
+}
+.tc{
+  text-align: center;
+}
+
+/* page */
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  justify-content: space-between;
+  font-size: 16px;
+  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}
+.page-head{
+  /* padding: 30px 25px 40px; */
+  padding: 30px 25px 40px;
+  text-align: center;
+}
+.page-head-title {
+  display: inline-block;
+  /* padding: 0 20px 10px 20px;
+  font-size: 16px; */
+  padding: 0 20px 10px 20px;
+  font-size: 16px;
+}
+.page-head-line{
+  margin: 0 auto;
+  /* width: 75px;
+  height: 1px; */
+  width: 75px;
+  height: 1px;
+  background-color: var(--weui-FG-1);
+}
+.page-head-desc{
+  padding-top: 10px;
+  color: var(--weui-FG-1);
+  font-size: 16px;
+}
+
+.page-body {
+  width: 100%;
+  flex-grow: 1;
+  /* overflow-x: hidden; */
+}
+.page-body-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
+  width: 100%;
+}
+.page-body-wording {
+  text-align: center;
+  padding: 100px 50px;
+}
+.page-body-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--weui-BG-2);
+  width: 100%;
+  padding: 25px 0 75px 0;
+}
+.page-body-title {
+  margin-bottom: 50px;
+  font-size: 16px;
+}
+.page-body-text {
+  font-size: 15px;
+  line-height: 26px;
+  color: var(--weui-FG-2);
+}
+.page-body-text-small {
+  font-size: 12px;
+  color: var(--weui-FG-0);
+  margin-bottom: 50px;
+}
+
+.page-foot{
+  /* margin: 50px 0 0 0; */
+  margin: 50px 0 0 0;
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+  /* padding-bottom: 15px; */
+  padding-bottom: 15px;
+  text-align: center;
+  color: #1aad19;
+  font-size: 0;
+}
+.icon-foot{
+  /* width: 151px;
+  height: 12px; */
+  width: 76px;
+  height: 12px;
+}
+
+.page-section{
+  width: 100%;
+  margin-bottom: 30px;
+}
+.page-section_center{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.page-section:last-child{
+  margin-bottom: 0;
+}
+.page-section-gap{
   box-sizing: border-box;
-} 
+  padding: 0 15px;
+}
+.page-section-spacing{
+  box-sizing: border-box;
+  padding: 0 40px;
+}
+.page-section-title{
+  /* font-size: 14px; */
+  font-size: 14px;
+  color: var(--weui-FG-1);
+  /* margin-bottom: 5px;
+  padding-left: 15px;
+  padding-right: 15px; */
+  margin-bottom: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.page-section-gap .page-section-title{
+  padding-left: 0;
+  padding-right: 0;
+}
+.page-section-ctn{
+
+}
+
+/* widget */
+.btn-area{
+  margin-top: 30px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 15px;
+}
+
+.image-plus {
+  width: 75px;
+  height: 75px;
+  border: 1px solid var(--weui-FG-1);
+  position: relative;
+}
+.image-plus-nb{
+  border: 0;
+}
+.image-plus-text{
+  color: var(--weui-FG-2);
+  font-size: 14px;
+}
+.image-plus-horizontal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: var(--weui-FG-1);
+  width: 2px;
+  height: 40px;
+  transform: translate(-50%, -50%);
+}
+.image-plus-vertical {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: var(--weui-FG-1);
+  width: 40px;
+  height: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.demo-text-1{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #1AAD19;
+  color: #FFFFFF;
+  font-size: 18px;
+}
+.demo-text-1:before{
+  content: 'A';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.demo-text-2{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #2782D7;
+  color: #FFFFFF;
+  font-size: 18px;
+}
+.demo-text-2:before{
+  content: 'B';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.demo-text-3{
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #F1F1F1;
+  color: #353535;
+  font-size: 18px;
+}
+.demo-text-3:before{
+  content: 'C';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/pages/common/foot.wxml b/pages/common/foot.wxml
index 2375957..813374f 100644
--- a/pages/common/foot.wxml
+++ b/pages/common/foot.wxml
@@ -1,5 +1,5 @@
 <template name="foot">
-  <navigator class="page-foot" openType="switchTab" url="/page/component/index" hover-class="none">
-    <image class="icon-foot" src="../../../../image/icon_foot.png"></image>
+  <navigator class="page-foot" openType="switchTab" url="/pages/component/index" hover-class="none">
+    <image class="icon-foot" src="../../../image/icon_foot.png"></image>
   </navigator>
 </template>
\ No newline at end of file