完善添加银行卡功能

pages/my-index/components/card-input.vue

@@ -0,0 +1,72 @@
+<script setup>
+  const name = defineModel({
+    type: String,
+    default: ''
+  })
+
+  const props = defineProps({
+    /**
+     * 输入框状态类型
+     * text: 文本
+     * password: 密码
+     * number: 数字
+     * tel: 手机号
+     * email: 邮箱
+     */
+    type: {
+      type: String,
+      default: 'text'
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  })
+
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #D9D9D9; font-size: 28rpx; font-style: normal; text-transform: none;`
+</script>
+
+<template>
+  <view class="card-input">
+    <text class="title">{{ props.title }}</text>
+    <input
+      v-model="name"
+      :type="props.type"
+      :placeholder-style="placeholderStyle"
+      :placeholder="props.placeholder"
+    />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .card-input + .card-input {
+    margin-top: 16rpx;
+  }
+  .card-input {
+    background: #ffffff;
+    border-radius: 16rpx;
+    padding: 20rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+    input {
+      width: 340rpx;
+      text-align: right;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #333333;
+    }
+  }
+</style>