fix: shortpassword 弹起优化 (#529)

* fix: checkbox间距调整，官网案例样式调整

* fix: checkbox样式调整

* fix: taro drag

* fix: taro drag doc

* fix: checkbox间距调整

* upd: actionsheet shortpassword taro doc

* fix: password taro upd

* fix: drag taro demo

* fix: taro checkbox radio的demo样式优化

* fix: taro checkbox样式优化

* fix: checkbox h5样式优化

* fix: radio的demo调整

* fix: tabbar文字居中修改

* fix: shortpassword 弹起优化

Co-authored-by: love_forever <1039168735@qq.com>

src/packages/__VUE/shortpassword/index.scss

@@ -24,19 +24,28 @@
   padding: 24px 0 10px 0;
   text-align: center;
   position: relative;
-
+  .nut-input-site {
+    width: 247px;
+    height: 41px;
+    border-radius: 4px;
+  }
   input {
     width: 247px;
     height: 41px;
     border-radius: 4px;
   }
-
-  .nut-input-real-taro {
-    width: 0;
+  .nut-input-real {
     padding: 0 12px;
     opacity: 0;
   }
 }
+.nut-input-real-taro {
+  width: 0;
+  padding: 0 12px;
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+}
 
 .psd-blink {
   display: inline-block;
@@ -119,7 +128,3 @@
     color: $white;
   }
 }
-
-.nut-dialog-content {
-  padding-bottom: 0;
-}

src/packages/__VUE/shortpassword/index.taro.vue

@@ -6,7 +6,6 @@
         borderRadius: '12px',
         textAlign: 'center'
       }"
-      class="nut-short-popup"
       v-model:visible="show"
       :closeable="true"
       @click-close-icon="closeIcon"
@@ -15,15 +14,15 @@
     >
       <view class="nut-shortpsd-title">{{ title }}</view>
       <view class="nut-shortpsdWx-subtitle">{{ desc }}</view>
+      <input
+        class="nut-input-real-taro"
+        type="number"
+        :maxlength="length"
+        v-model="realInput"
+        @input="changeValue"
+      />
       <view class="nut-input-w">
-        <input
-          class="nut-input-real-taro"
-          type="number"
-          :maxlength="length"
-          v-model="realInput"
-          @input="changeValue"
-          @blur="blur"
-        />
+        <view class="nut-input-site"></view>
         <view class="nut-shortpsd-fake" @click="focus">
           <view
             class="nut-shortpsd-li"
@@ -117,8 +116,6 @@ export default create({
     function focus() {
       let a = document.getElementsByClassName('nut-input-real-taro')[0] as any;
       a.focus();
-      realpwd.value = document.getElementsByClassName('popup-center')[0] as any;
-      realpwd.value.style.top = '45%';
     }
     watch(
       () => props.visible,
@@ -153,12 +150,6 @@ export default create({
     function onTips() {
       emit('tips');
     }
-    function blur() {
-      let popupCenter = document.getElementsByClassName(
-        'popup-center'
-      )[0] as any;
-      popupCenter.style.top = '50%';
-    }
     onMounted(() => {
       eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
     });
@@ -173,8 +164,7 @@ export default create({
       onTips,
       focus,
       show,
-      closeIcon,
-      blur
+      closeIcon
     };
   }
 });

src/sites/mobile-taro/vue/src/dentry/pages/shortpassword/index.vue

@@ -64,6 +64,12 @@
         state.errorMsg = '请输入正确密码';
       "
     ></nut-cell>
+    <nut-toast
+      msg="忘记密码"
+      v-model:visible="state.show"
+      type="text"
+      :cover="state.cover"
+    />
   </div>
 </template>
 
@@ -78,7 +84,9 @@ export default {
       noButton: true,
       value: '',
       errorMsg: '',
-      length: 6
+      length: 6,
+      show: false,
+      cover: false
     });
     const methods = {
       onChange(val: string) {
@@ -93,6 +101,8 @@ export default {
 
       onComplete() {},
       onTips() {
+        state.show = true;
+        state.cover = false;
         // proxy.$toast.text('执行忘记密码逻辑');
       },
       close() {