uniapp input输入账号

#居中#  #子控件决定父控件#   #居中显示#

<view class="content">

  <view class="uni-input-wrapper ">

      <input class="uni-input" placeholder="请输入账号" :value="inputClearValue" @input="clearInput" />

     <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon"  @click="clearIcon">

    </image>

</view>

</view>

样式：父布局决定子布局居中

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.uni-input-wrapper {

width: 70%;

 margin-top: 86rpx;

padding-left: 50rpx;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

flex-wrap: nowrap;

   /* align-self: center; */

/* background-color: #ffffff; */ 

background-color: #000;

border-style: solid;

box-sizing: 2rpx;

border-color: #fafafa;

border-radius: 50rpx;

}

.uni-input {

    width: 70%;

height:90rpx;

font-size: 30rpx;

padding: 0px;

flex: 1;

background-color: red;

}

.uni-icon {

width: 24px;

height: 24px;

margin-right: 20rpx;

}