<template>
  <view>
    <view class="name">
      <view class="name-text">{{ title }}</view>
      <input :value="value" class="name-input" :placeholder="placeholder" placeholder-class="placeholder-class"
             maxlength="50" @input="changeInput"></input>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LockInput',
  props:{
    title: String,
    placeholder: String,
    value: String
  },
  methods: {
    changeInput(e) {
      this.$emit('changeInput', e.detail.value)
    }
  },
}
</script>

<style scoped lang="scss">
.name {
  height: 100rpx;
  width: 750rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;

  .name-text {
    width: 168rpx;
    margin-left: 32rpx;
    font-weight: bold;
    font-size: 32rpx;
    line-height: 100rpx;
  }

  .name-input {
    margin-right: 32rpx;
    text-align: right;
    width: 518rpx;
    height: 100rpx;
    font-size: 32rpx;
    line-height: 100rpx;
    border: none;
    outline: none;
  }
}

.placeholder-class {
  text-align: right;
  font-size: 32rpx;
  line-height: 100rpx;
}
</style>
