app-form-view 0.0.1 → 0.0.3

package/src/assets/css/app-form.css

@@ -3,9 +3,9 @@
 
 .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
 
-.flex-row { -webkit-box-orient: vertical; -ms-flex-direction: row; flex-direction: row; }
+.flex-row { -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }
 
-.flex-row-reverse { -webkit-box-orient: vertical; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
 
 .flex-column, .custom-picker-container { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
 
@@ -17,7 +17,7 @@
 
 .justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
 
-.justify-content-space-around { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; }
+.justify-content-space-around { -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; }
 
 .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 
@@ -27,23 +27,23 @@
 
 .align-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
 
-.flex-wrap-nowrap { -webkit-box-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
 
-.flex-wrap-wrap { -webkit-box-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.flex-wrap-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 
-.flex-wrap-reverse { -webkit-box-wrap: reverse; -ms-flex-wrap: reverse; flex-wrap: reverse; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
 
-.align-content-start { -webkit-box-align: flex-start; -ms-flex-align: flex-start; -webkit-align-conten: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+.align-content-start { -webkit-box-lines: start; -ms-flex-line-pack: start; align-content: flex-start; }
 
-.align-content-end { -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-conten: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+.align-content-end { -webkit-box-lines: end; -ms-flex-line-pack: end; align-content: flex-end; }
 
-.align-content-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-conten: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+.align-content-center { -webkit-box-lines: center; -ms-flex-line-pack: center; align-content: center; }
 
-.align-content-between { -webkit-box-align: space-between; -ms-flex-align: space-between; -webkit-align-conten: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.align-content-between { -webkit-box-lines: justify; -ms-flex-line-pack: justify; align-content: space-between; }
 
-.align-content-around { -webkit-box-align: space-around; -ms-flex-align: space-around; -webkit-align-conten: space-around; -ms-flex-pack: distribute; justify-content: space-around; }
+.align-content-around { -webkit-box-lines: space-around; -ms-flex-line-pack: space-around; align-content: space-around; }
 
-.align-content-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-conten: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; }
+.align-content-stretch { -webkit-box-lines: stretch; -ms-flex-line-pack: stretch; align-content: stretch; }
 
 .flex-item-auto { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
 
@@ -53,7 +53,9 @@
 
 .flex-item-overflowY { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; height: 0; min-height: 0; }
 
-:root { /* 主色调 */ --primary-color: #409EFF; /* 蓝色 */ --info-color: #3bd46c; /* 辅助色 */ --success-color: #3bd46c; /* 绿色 */ --danger-color: #f53f3f; /* 红色 */ --warning-color: #fcad47; /* 橙色 */ /* 文本颜色 */ --text-color: #494949; --gray-7: #86909c; /* 背景色 */ --background-color: #f1eef6; }
+:root { /* 主色调 */ --primary-color: #1989fa; --primary-color-60: rgba(64, 158, 255, 0.8); /* 蓝色 */ --info-color: #3bd46c; /* 辅助色 */ --success-color: #3bd46c; /* 绿色 */ --danger-color: #f53f3f; /* 红色 */ --warning-color: #fcad47; /* 橙色 */ /* 文本颜色 */ --title-text-color: #1c2833; --gray-7: #86909c; /* 背景色 */ --background-color: #f1eef6; --nav-bar-icon-color: '#4c4c4c'
+
+; }
 
 .custom-picker-container { height: 100%; overflow: hidden; }
 
@@ -84,8 +86,42 @@ button[disabled] { opacity: 0.6; }
 
 .van-icon { vertical-align: middle; }
 
+.h100 { height: 100%; }
+
 .app-page { height: 100%; overflow: hidden; }
 
-.app-page .bottom-btns .widget-button { display: -webkit-box; display: -ms-flexbox; display: flex; }
+.app-page .bottom-btns { gap: 15px; padding-left: 10px; padding-right: 10px; }
+
+.app-page .bottom-btns .widget-button { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #646566; }
 
 .app-page .bottom-btns .widget-button .van-icon { display: none; }
+
+.app-page .bottom-btns .widget-button .icon { margin: 0 auto 2px; font-size: 18px; }
+
+.app-page .bottom-btns .widget-button:last-child { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: white; border-radius: 15px; height: 40px; font-size: 14px; margin-right: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: -webkit-gradient(linear, left top, right top, from(var(--primary-color-60)), to(var(--primary-color))); background: -o-linear-gradient(left, var(--primary-color-60), var(--primary-color)); background: linear-gradient(to right, var(--primary-color-60), var(--primary-color)); }
+
+.app-page .bottom-btns .widget-button:last-child .icon { color: #fff; margin: 0 5px 0 0; }
+
+.app-page .widget-row { background: #fff; border-radius: 10px; padding-top: 5px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px; }
+
+.app-page .widget-row .sub-item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 15px; margin-top: 0; border-bottom: none; }
+
+.app-page .widget-row .sub-item-title .left-label { font-size: 16px; font-weight: 600; color: var(--title-text-color); }
+
+.app-page .widget-row .table-pro { padding-left: 10px; padding-right: 10px; }
+
+.app-page .sub-item-title { background: #fff; border-bottom: none; }
+
+.app-page .sub-item-title .title { font-size: 16px; font-weight: 600; color: var(--title-text-color); }
+
+.h4, .h5, .h6, h4, h5, h6 { margin-bottom: 0; margin-top: 0; }
+
+.last-cell-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-bottom: 10px; }
+
+.last-cell-child.van-cell { padding-bottom: 10px; }
+
+.last-cell-child.van-cell:after { display: none; }
+
+.first-cell-child { border-top-left-radius: 10px; border-top-right-radius: 10px; margin-top: 10px; }
+
+.van-nav-bar .van-icon { color: var(--nav-bar-icon-color); }

package/src/assets/css/global.css

@@ -3,9 +3,9 @@
 
 .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
 
-.flex-row { -webkit-box-orient: vertical; -ms-flex-direction: row; flex-direction: row; }
+.flex-row { -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }
 
-.flex-row-reverse { -webkit-box-orient: vertical; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
 
 .flex-column { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
 
@@ -17,7 +17,7 @@
 
 .justify-content-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
 
-.justify-content-space-around { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; }
+.justify-content-space-around { -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; }
 
 .align-items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 
@@ -27,23 +27,23 @@
 
 .align-items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
 
-.flex-wrap-nowrap { -webkit-box-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
 
-.flex-wrap-wrap { -webkit-box-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.flex-wrap-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 
-.flex-wrap-reverse { -webkit-box-wrap: reverse; -ms-flex-wrap: reverse; flex-wrap: reverse; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
 
-.align-content-start { -webkit-box-align: flex-start; -ms-flex-align: flex-start; -webkit-align-conten: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+.align-content-start { -webkit-box-lines: start; -ms-flex-line-pack: start; align-content: flex-start; }
 
-.align-content-end { -webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-conten: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+.align-content-end { -webkit-box-lines: end; -ms-flex-line-pack: end; align-content: flex-end; }
 
-.align-content-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-conten: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+.align-content-center { -webkit-box-lines: center; -ms-flex-line-pack: center; align-content: center; }
 
-.align-content-between { -webkit-box-align: space-between; -ms-flex-align: space-between; -webkit-align-conten: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.align-content-between { -webkit-box-lines: justify; -ms-flex-line-pack: justify; align-content: space-between; }
 
-.align-content-around { -webkit-box-align: space-around; -ms-flex-align: space-around; -webkit-align-conten: space-around; -ms-flex-pack: distribute; justify-content: space-around; }
+.align-content-around { -webkit-box-lines: space-around; -ms-flex-line-pack: space-around; align-content: space-around; }
 
-.align-content-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-conten: stretch; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; }
+.align-content-stretch { -webkit-box-lines: stretch; -ms-flex-line-pack: stretch; align-content: stretch; }
 
 .flex-item-auto { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
 

package/src/assets/scss/_flex.scss

@@ -12,14 +12,14 @@
 }
 
 .flex-row {
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: horizontal;
     -ms-flex-direction: row;
     -webkit-flex-direction: row;
     flex-direction: row;
 }
 
 .flex-row-reverse {
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: horizontal;
     -ms-flex-direction: row-reverse;
     -webkit-flex-direction: row-reverse;
     flex-direction: row-reverse;
@@ -61,8 +61,8 @@
 }
 
 .justify-content-space-around {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
     -webkit-justify-content: space-around;
     justify-content: space-around;
 }
@@ -96,66 +96,63 @@
 }
 
 .flex-wrap-nowrap {
-    -webkit-box-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     -webkit-flex-wrap: nowrap;
     flex-wrap: nowrap;
 }
 
 .flex-wrap-wrap {
-    -webkit-box-wrap: wrap;
     -ms-flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
 }
 
 .flex-wrap-reverse {
-    -webkit-box-wrap: reverse;
-    -ms-flex-wrap: reverse;
-    -webkit-flex-wrap: reverse;
-    flex-wrap: reverse;
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
 }
 
 .align-content-start {
-    -webkit-box-align: flex-start;
-    -ms-flex-align: flex-start;
-    -webkit-align-conten: flex-start;
-    justify-content: flex-start;
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
 }
 
 .align-content-end {
-    -webkit-box-align: flex-end;
-    -ms-flex-align: flex-end;
-    -webkit-align-conten: flex-end;
-    justify-content: flex-end;
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
 }
 
 .align-content-center {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-conten: center;
-    justify-content: center;
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
 }
 
 .align-content-between {
-    -webkit-box-align: space-between;
-    -ms-flex-align: space-between;
-    -webkit-align-conten: space-between;
-    justify-content: space-between;
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
 }
 
 .align-content-around {
-    -webkit-box-align: space-around;
-    -ms-flex-align: space-around;
-    -webkit-align-conten: space-around;
-    justify-content: space-around;
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
 }
 
 .align-content-stretch {
-    -webkit-box-align: stretch;
-    -ms-flex-align: stretch;
-    -webkit-align-conten: stretch;
-    justify-content: stretch;
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
 }
 
 .flex-item-auto {

package/src/assets/scss/app-form.scss

@@ -1,4 +1,182 @@
-@import '_flex.scss';
+.flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.inline-flex {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+.flex-row {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.flex-column {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-column-reverse {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.justify-content-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.justify-content-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.justify-content-space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.justify-content-space-around {
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+.align-items-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.align-items-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+.align-items-center {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.align-items-baseline {
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+
+.flex-wrap-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.flex-wrap-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+.align-content-start {
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.align-content-end {
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.align-content-center {
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.align-content-between {
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.align-content-around {
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+.align-content-stretch {
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.flex-item-auto {
+    flex: auto;
+}
+
+.flex-item {
+    flex: 1;
+    overflow: hidden;
+}
+
+.flex-item-overflowX {
+    flex: 1;
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+}
+
+.flex-item-overflowY {
+    flex: 1;
+    overflow: hidden;
+    height: 0;
+    min-height: 0;
+}
 :root {
     /* 主色调 */
     --primary-color: #1989fa;
@@ -81,9 +259,13 @@ button[disabled]{
     height:100%;
     overflow:hidden;
     .bottom-btns{
+        gap:15px;
+        padding-left: 10px;
+        padding-right: 10px;
         .widget-button{
             display:flex;
             margin:0;
+           
             flex-direction: column;
             align-items: center;
             color: #646566;
@@ -101,6 +283,7 @@ button[disabled]{
                 height: 40px;
                 font-size: 14px;
                 margin-right: 5px;
+                flex:1;
   background: linear-gradient(to right, var(--primary-color-60), var(--primary-color));
                 .icon{color:#fff;margin:0 5px 0 0;}
             }

package/src/assets/scss/global.scss

@@ -1,4 +1,182 @@
-@import './_flex.scss';
+.flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.inline-flex {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+.flex-row {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.flex-column {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-column-reverse {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.justify-content-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.justify-content-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.justify-content-space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.justify-content-space-around {
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+.align-items-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.align-items-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+.align-items-center {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.align-items-baseline {
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+
+.flex-wrap-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.flex-wrap-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+.align-content-start {
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.align-content-end {
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.align-content-center {
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.align-content-between {
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.align-content-around {
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+.align-content-stretch {
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.flex-item-auto {
+    flex: auto;
+}
+
+.flex-item {
+    flex: 1;
+    overflow: hidden;
+}
+
+.flex-item-overflowX {
+    flex: 1;
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+}
+
+.flex-item-overflowY {
+    flex: 1;
+    overflow: hidden;
+    height: 0;
+    min-height: 0;
+}
 body,
 html {
     width: 100%;

package/src/components/appForm/Checkbox.vue

@@ -70,3 +70,8 @@ export default {
     }
 }
 </script>
+<style scoped>
+.van-checkbox--horizontal {
+    margin-bottom: 15px;
+}
+</style>

package/src/components/appForm/Input.vue

@@ -1,6 +1,6 @@
 <template>
-    <van-field v-model="innerValue" :label="conf.hideLabel ? '' : conf.label" v-bind="filterAttrs" :rules="rules"
-        @input="handleChange" @clear="handleClear" />
+    <van-field v-model="innerValue" :label="conf.hideLabel ? '' : conf.label" v-bind="filterAttrs"
+        :rules="mode == 'view' ? [] : rules" @input="handleChange" @clear="handleClear" />
 </template>
 
 <script>