feat: 按钮增加white类型

miniprogram/components/introduction-popup/introduction-popup.less

@@ -8,11 +8,16 @@
     z-index: 9999;
 
     &-title {
+        position: absolute;
+        top: 52rpx;
+        left: 50%;
+        transform: translateX(-50%);
         text-align: center;
         color: rgba(255, 235, 59, 0.95);
         font-size: 40rpx;
         font-weight: bold;
-        margin-top: 52rpx;
+        width: 100%;
+        // margin-top: 52rpx;
     }
 
     .tip-box {
@@ -21,15 +26,19 @@
 
     .tip-text {
         color: rgba(255, 235, 59, 0.95);
+        // color: #fff;
         font-size: 32rpx;
     }
 
     .first-step {
-        position: relative;
+        position: absolute;
+        top: 128rpx;
+        left: 0;
+        width: 100%;
 
         .tip-box {
             position: absolute;
-            top: 18rpx;
+            top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 342px;
@@ -40,7 +49,7 @@
 
         .guide-icon {
             position: absolute;
-            top: 66rpx;
+            top: 48rpx;
             left: 106rpx;
             width: 22px;
             height: 39px;
@@ -49,7 +58,7 @@
 
         .tip-text {
             position: absolute;
-            top: 156rpx;
+            top: 138rpx;
             left: 110rpx;
             width: 550rpx;
             height: 94rpx;
@@ -57,4 +66,12 @@
         }
     }
 
+    .btn-next-step {
+        color: rgba(255, 235, 59, 0.95);
+        border-radius: 28rpx;
+        position: absolute;
+        top: 260rpx;
+        left: 50%;
+        transform: translateX(-50%);
+    }
 }

miniprogram/components/introduction-popup/introduction-popup.wxml

@@ -11,5 +11,12 @@
         <view class="tip-text">
             这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
         </view>
+        <toy-button
+            type="white"
+            plain
+            bind:click="toNextStep"
+            custom-class="btn-next-step">
+            下一步
+        </toy-button>
     </view>
 </view>

miniprogram/ui/button/button.less

@@ -3,6 +3,12 @@
 @button-default-font-size: 32rpx;
 @button-default-color: #fff;
 
+wx-button:not([size=mini]) {
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+}
+
 .toy-button {
     box-sizing: border-box;
     display: inline-flex;
@@ -13,6 +19,9 @@
     border-radius: @button-border-radius;
     font-size: @button-default-font-size;
     color: @button-default-color;
+    padding: 0 44rpx;
+    width: auto !important;
+
 
     &--primary {
         background: rgba(255, 215, 25, 1);
@@ -46,6 +55,32 @@
         }
     }
 
+    &--white {
+        color: rgba(34, 36, 37, 0.9);
+        background: #fff;
+        box-shadow: 0 10rpx 0 rgba(255, 255, 255, 0.7);
+
+        &.disabled {
+            background: rgba(255, 255, 255, 0.8);
+            box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.55);
+        }
+
+        &.plain {
+            color: #fff;
+            background: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 1);
+            box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.88);
+
+            // &.disabled {
+            //     background: rgba(255, 255, 255, 0.2);
+            //     border: 1px solid rgba(255, 255, 255, 0.6);
+            //     box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6);
+            // }
+        }
+    }
+
+
+
     .loading-class,
     &__icon {
         margin-right: 24rpx;

miniprogram/ui/button/button.ts

@@ -10,6 +10,10 @@ Component({
             type: String,
             value: 'default', // primary, green, white
         },
+        plain: {
+            type: Boolean,
+            value: false, // 是否朴素按钮
+        },
         size: {
             type: String,
             value: 'normal', // large, normal, small, mini
@@ -88,4 +92,5 @@ Component({
             this.triggerEvent('click', e);
         },
     },
+    externalClasses: ['custom-class'],
 });

miniprogram/ui/button/button.wxml

@@ -4,7 +4,7 @@
 
 <button
     data-id="test-toy-button-id"
-    class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
+    class="toy-button toy-button--{{type}} {{Utils.classNames({disabled: disabled, loading: loading, plain: plain })}} custom-class"
     data-disabled="{{disabled}}"
     data-loading="{{loading}}"
     style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"