diff --git a/src/platforms/wechatMp/pages/examples/g-btn/index.json b/src/platforms/wechatMp/pages/examples/g-btn/index.json
new file mode 100644
index 000000000..6f3075ab5
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-btn/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "g-button"
+}
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-btn/index.less b/src/platforms/wechatMp/pages/examples/g-btn/index.less
new file mode 100644
index 000000000..debb9b256
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-btn/index.less
@@ -0,0 +1,11 @@
+/** index.wxss **/
+@import "../../../styles/base.less";
+@import "../../../styles/cpn.less";
+
+.page-body {
+ height: 100vh;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: @background-color-base;
+}
diff --git a/src/platforms/wechatMp/pages/examples/g-btn/index.ts b/src/platforms/wechatMp/pages/examples/g-btn/index.ts
new file mode 100644
index 000000000..f16cc1a82
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-btn/index.ts
@@ -0,0 +1 @@
+Page({});
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-btn/index.wxml b/src/platforms/wechatMp/pages/examples/g-btn/index.wxml
new file mode 100644
index 000000000..ae726a837
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-btn/index.wxml
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-form/index.json b/src/platforms/wechatMp/pages/examples/g-form/index.json
new file mode 100644
index 000000000..9393770d8
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-form/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "g-form"
+}
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-form/index.less b/src/platforms/wechatMp/pages/examples/g-form/index.less
new file mode 100644
index 000000000..debb9b256
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-form/index.less
@@ -0,0 +1,11 @@
+/** index.wxss **/
+@import "../../../styles/base.less";
+@import "../../../styles/cpn.less";
+
+.page-body {
+ height: 100vh;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: @background-color-base;
+}
diff --git a/src/platforms/wechatMp/pages/examples/g-form/index.ts b/src/platforms/wechatMp/pages/examples/g-form/index.ts
new file mode 100644
index 000000000..f16cc1a82
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-form/index.ts
@@ -0,0 +1 @@
+Page({});
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-form/index.wxml b/src/platforms/wechatMp/pages/examples/g-form/index.wxml
new file mode 100644
index 000000000..ee1f67791
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-form/index.wxml
@@ -0,0 +1,35 @@
+
+
+
+ 表单 标签和内容左右布局
+
+
+ 收货人
+
+
+
+
+
+ 手机号
+
+
+
+
+
+ 所在地区
+
+
+ {{areaText || '请选择'}}
+ chevron_right
+
+
+
+
+ 详细地址
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-input/index.json b/src/platforms/wechatMp/pages/examples/g-input/index.json
new file mode 100644
index 000000000..f94b29e03
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-input/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "g-input"
+}
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-input/index.less b/src/platforms/wechatMp/pages/examples/g-input/index.less
new file mode 100644
index 000000000..debb9b256
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-input/index.less
@@ -0,0 +1,11 @@
+/** index.wxss **/
+@import "../../../styles/base.less";
+@import "../../../styles/cpn.less";
+
+.page-body {
+ height: 100vh;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: @background-color-base;
+}
diff --git a/src/platforms/wechatMp/pages/examples/g-input/index.ts b/src/platforms/wechatMp/pages/examples/g-input/index.ts
new file mode 100644
index 000000000..949105630
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-input/index.ts
@@ -0,0 +1,10 @@
+Page({
+ data: {
+ error: true,
+ },
+ clearError() {
+ this.setData({
+ error: false,
+ })
+ }
+});
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/g-input/index.wxml b/src/platforms/wechatMp/pages/examples/g-input/index.wxml
new file mode 100644
index 000000000..721612566
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/g-input/index.wxml
@@ -0,0 +1,42 @@
+
+
+
+ 外标题输入框
+
+
+
+
+
+ 圆角输入框
+
+
+ 消费金额
+
+
+
+
+
+
+
+ 圆角输入框
+
+
+ 消费金额
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/index/index.json b/src/platforms/wechatMp/pages/examples/index/index.json
new file mode 100644
index 000000000..ed577253f
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/index/index.json
@@ -0,0 +1,3 @@
+{
+ "navigationBarTitleText": "组件"
+}
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/index/index.less b/src/platforms/wechatMp/pages/examples/index/index.less
new file mode 100644
index 000000000..debb9b256
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/index/index.less
@@ -0,0 +1,11 @@
+/** index.wxss **/
+@import "../../../styles/base.less";
+@import "../../../styles/cpn.less";
+
+.page-body {
+ height: 100vh;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: @background-color-base;
+}
diff --git a/src/platforms/wechatMp/pages/examples/index/index.ts b/src/platforms/wechatMp/pages/examples/index/index.ts
new file mode 100644
index 000000000..4c63dda74
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/index/index.ts
@@ -0,0 +1,7 @@
+Page({
+ navigateToCpnPage(e:any) {
+ console.log(e);
+ const pagename = e.currentTarget.dataset.value;
+ wx.navigateTo({ url: `../g-${pagename}/index` });
+ }
+});
\ No newline at end of file
diff --git a/src/platforms/wechatMp/pages/examples/index/index.wxml b/src/platforms/wechatMp/pages/examples/index/index.wxml
new file mode 100644
index 000000000..47577be1a
--- /dev/null
+++ b/src/platforms/wechatMp/pages/examples/index/index.wxml
@@ -0,0 +1,15 @@
+
+
+
+ 按钮
+ chevron_right
+
+
+ 表单
+ chevron_right
+
+
+ 输入框
+ chevron_right
+
+
\ No newline at end of file
diff --git a/src/platforms/wechatMp/styles/cpn.less b/src/platforms/wechatMp/styles/cpn copy.less
similarity index 83%
rename from src/platforms/wechatMp/styles/cpn.less
rename to src/platforms/wechatMp/styles/cpn copy.less
index 822252cf0..af7102446 100644
--- a/src/platforms/wechatMp/styles/cpn.less
+++ b/src/platforms/wechatMp/styles/cpn copy.less
@@ -120,6 +120,7 @@
//form
.g-form {
+ position: relative;
display: flex;
flex-direction: column;
background-color: @background-color-base;
@@ -128,18 +129,17 @@
border-bottom-width: 1px;
&-item {
+ position: relative;
display: flex;
align-items: center;
background-color: #fff;
- padding: @size-spacing-base 0rpx;
- padding-right: 24rpx;
- margin-left: @size-spacing-base;
+ padding: @size-spacing-base;
&-label {
color: @title-color;
line-height: 1;
min-width: 150rpx;
- padding-right: 30rpx;
+ padding-right: 20rpx;
}
&-content {
@@ -151,8 +151,12 @@
}
}
-.g-form > view:not(:last-child) {
- margin-bottom: 1px;
+.g-form > view:not(:last-child)::after {
+ .hairline();
+
+ border-bottom-width: 1px;
+ left: 15px;
+ right: 0;
}
//input
@@ -166,13 +170,16 @@
&-border {
text-align: right;
}
+
+ &-error {
+ color: @error-color;
+ }
}
//pannel
.g-cell {
padding: @size-spacing-base;
display: flex;
- flex: 1;
align-items: center;
justify-content: space-between;
background-color: #fff;
@@ -193,3 +200,22 @@
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
}
+
+.g-border-error {
+ border-color: @error-color;
+}
+
+//hairline
+.hairline() {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200%;
+ height: 200%;
+ transform: scale(0.5);
+ transform-origin: 0 0;
+ pointer-events: none;
+ box-sizing: border-box;
+ border: 0 solid @border-color-split;
+}