uniapp+vue3+ts 开发支付宝小程序 输入框有内容时样式错乱

<template>  
  <view class="form-item" :class="props.autoClass">  
    <view class="lab">{{ labtxt }}</view>  
    <template v-if="!$slots.con">  
      <input  
        v-if="props.type !== 'password' || !pwdFlag"  
        class="form-input"  
        placeholder-class="input_placeholder"  
        :type="props.type === 'password' ? 'text' : props.type"  
        v-model="inputValue"  
        :maxlength="props.maxlength"  
        :placeholder="placeholder"  
        :disabled="disable"  
      />  
      <image  
        v-if="inputValue && !disable"  
        @click="delInputValue()"  
        class="icon del"  
        :src="`${$imgUrl}common/icon_del.png`"  
      />  
    </template>  
    <slot name="con"></slot>  
  </view>  
</template>  

<script setup lang="ts">  
const $imgUrl = inject("$imgUrl");  
const props = defineProps({  
  labtxt: {  
    type: String,  
    default: "",  
  },  
  placeholder: {  
    type: String,  
    default: "",  
  },  
  type: {  
    type: String,  
    default: "text",  
  },  
  maxlength: {  
    type: Number,  
    default: 100000,  
  },  
  autoClass: {  
    type: String,  
    default: "",  
  },  
  disable: {  
    type: Boolean,  
    default: false,  
  },  
});  
const inputValue = defineModel({ default: "" });  
const pwdFlag = ref(props.type === "password");  
const emit = defineEmits(["delete"]);  

const delInputValue = () => {  
  inputValue.value = "";  
};  
</script>  

<style scoped lang="scss">  
.lab {  
  width: 226rpx;  
  flex-shrink: 0;  
  font-weight: 400;  
  font-size: 28rpx;  
  color: #333;  
}  
.form-input {  
  flex: 1;  
  height: 56rpx;  
  line-height: 56rpx;  
  font-weight: 500;  
  font-size: 28rpx;  
  color: #333;  
  padding: 0;  
  text-align: right;  
}  
:deep(.input_placeholder) {  
  font-size: 28rpx;  
  font-family:  
    PingFang SC-Regular,  
    PingFang SC;  
  font-weight: 400;  
  color: #999 !important;  
}  
.icon {  
  width: 40rpx;  
  height: 40rpx;  
  margin-left: 16rpx;  
}  
.form-item {  
  position: relative;  
  display: flex;  
  align-items: center;  
  border-bottom: 1px solid #e0e0e0;  
  box-sizing: border-box;  
  padding: 24rpx 0;  

  &.bd-0 {  
    border-bottom: 0;  
  }  
  &.lab-w_auto {  
    .lab {  
      width: auto;  
      margin-right: 24rpx;  
    }  
  }  
}  
</style>  

<Auinput  
    labtxt="法人姓名"  
    placeholder="请输入法人姓名"  
    v-model="realName"  
  />