add example fix styles

src/platforms/wechatMp/pages/examples/g-btn/index.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "g-button"
+}

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;
+}

src/platforms/wechatMp/pages/examples/g-btn/index.ts

@@ -0,0 +1 @@
+Page({});

src/platforms/wechatMp/pages/examples/g-btn/index.wxml

@@ -0,0 +1,44 @@
+<!-- index.wxml -->
+<view class="page-body">
+    <view class="g-cell">
+        <button class="g-btn" size="default" inline>行内按钮1</button>
+        <button class="g-btn" size="default" inline>行内按钮2</button>
+        <button class="g-btn" size="default" inline>行内按钮3</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn" size="default">基本按钮</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-large" size="default">大按钮</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-small" size="default">小按钮</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-fullWidth" size="default">全宽按钮</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-warning g-btn-small" size="default">warning</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-primary g-btn-small" size="default">warning</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-error g-btn-small" size="default">error</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-info g-btn-small" size="default">info</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-success g-btn-small" size="default">success</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-ghost g-btn-small" size="default">ghost</button>
+    </view>
+    <view class="g-cell">
+        <button class="g-btn g-btn-primary g-btn-small g-btn-loading" size="default">
+            <view class="g-btn-loading-inner" wx:if="{{true}}"></view>
+            loading
+        </button>
+    </view>
+</view>

src/platforms/wechatMp/pages/examples/g-form/index.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "g-form"
+}

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;
+}

src/platforms/wechatMp/pages/examples/g-form/index.ts

@@ -0,0 +1 @@
+Page({});

src/platforms/wechatMp/pages/examples/g-form/index.wxml

@@ -0,0 +1,35 @@
+<!-- index.wxml -->
+<view class="page-body">
+    <view class="g-pannel">
+        <view class="g-pannel-title">表单 标签和内容左右布局</view>
+        <view class="g-form">
+            <view class="g-form-item">
+                <view class="g-form-item-label">收货人</view>
+                <view class="g-form-item-content">
+                    <input placeholder="姓名" value="{{name}}" type="string" confirm-type="done" />
+                </view>
+            </view>
+            <view class="g-form-item">
+                <view class="g-form-item-label">手机号</view>
+                <view class="g-form-item-content">
+                    <input placeholder="请输入" value="{{phone}}" type="string" confirm-type="done" />
+                </view>
+            </view>
+            <view class="g-form-item">
+                <view class="g-form-item-label">所在地区</view>
+                <view class="g-form-item-content">
+                    <view style="display: flex; flex: 1; align-items: cneter; justify-content:space-between">
+                        <text>{{areaText || '请选择'}}</text>
+                        <span class="material-icons" color="#495060">chevron_right</span>
+                    </view>
+                </view>
+            </view>
+            <view class="g-form-item">
+                <view class="g-form-item-label">详细地址</view>
+                <view class="g-form-item-content">
+                    <textarea class="g-input" placeholder="请输入" value="{{detail}}" auto-height maxlength="50" data-path="detail" confirm-type="done" />
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

src/platforms/wechatMp/pages/examples/g-input/index.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "g-input"
+}

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;
+}

src/platforms/wechatMp/pages/examples/g-input/index.ts

@@ -0,0 +1,10 @@
+Page({
+    data: {
+        error: true,
+    },
+    clearError() {
+        this.setData({
+            error: false,
+        })
+    }
+});

src/platforms/wechatMp/pages/examples/g-input/index.wxml

@@ -0,0 +1,42 @@
+<!-- index.wxml -->
+<view class="page-body">
+    <view class="g-pannel">
+        <view class="g-pannel-title">外标题输入框</view>
+        <view class="g-cell">
+            <input placeholder="请输入内容" class="g-input" />
+        </view>
+    </view>
+    <view class="g-pannel">
+        <view class="g-pannel-title">圆角输入框</view>
+        <view class="g-cell">
+            <view class="g-cell g-border-radius" style="flex: 1">
+                <view class="g-form-item-label">消费金额</view>
+                <view class="g-form-content">
+                    <input class="g-input g-input-border" placeholder="请输入" />
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="g-pannel">
+        <view class="g-pannel-title">圆角输入框</view>
+        <view class="g-cell">
+            <view class="g-cell g-border-radius {{error ? 'g-border-error' : ''}}" style="flex: 1">
+                <view class="g-form-item-label">消费金额</view>
+                <view class="g-form-content">
+                    <input class="g-input g-input-border {{error ? 'g-input-error' : ''}}" placeholder="自动聚焦错误的" bindfocus="clearError" />
+                </view>
+            </view>
+        </view>
+    </view>
+    <!-- <view class="g-pannel">
+        <view class="g-pannel-title">圆角输入框</view>
+        <view class="g-cell">
+            <view class="g-cell g-border-radius {{error ? 'g-border-error' : ''}}" style="flex: 1">
+                <view class="g-form-item-label">消费金额</view>
+                <view class="g-form-content">
+                    <input class="g-input g-input-border {{error ? 'g-input-error' : ''}}" focus="{{error}}" placeholder="自动聚焦错误的" />
+                </view>
+            </view>
+        </view>
+    </view> -->
+</view>

src/platforms/wechatMp/pages/examples/index/index.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "组件"
+}

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;
+}

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` });
+    }
+});

src/platforms/wechatMp/pages/examples/index/index.wxml

@@ -0,0 +1,15 @@
+<!-- index.wxml -->
+<view class="page-body">
+    <view class="g-cell" data-value="btn" bind:tap="navigateToCpnPage">
+        <text>按钮</text>
+        <span class="material-icons" color="#495060">chevron_right</span>
+    </view>
+    <view class="g-cell" data-value="form" bind:tap="navigateToCpnPage">
+        <text>表单</text>
+        <span class="material-icons" color="#495060">chevron_right</span>
+    </view>
+    <view class="g-cell" data-value="input" bind:tap="navigateToCpnPage">
+        <text>输入框</text>
+        <span class="material-icons" color="#495060">chevron_right</span>
+    </view>
+</view>

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: @size-spacing-base;
-    padding-right: 24rpx;
-    margin-left: @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) {
+.g-form > view:not(:last-child)::after {
-  margin-bottom: 1px;
+  .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;
+}