解决input获取焦点后,旁边文字抖动问题

当input获取焦点后,旁边手机号字体会抖动

 <div class="responsible-phonenumber">
            <span>手机号:</span>
            <div><input class="input" type="text" :maxlength="11" placeholder="请输入手机号"
             v-model="responsiblePhoneNumber" @blur="responsibleBlur"></div>
    </div>

 .responsible-phonenumber {
      height: 52px;
      line-height: 52px;   *******
      opacity: 0.9;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #000000;
      letter-spacing: 0;
      display: flex;******
      flex-direction: row;********
      align-items: baseline;*********
        .input{
            width: 400px;
            height: 52px;
            background: #F5F5F5;
            border-radius: 26px;
            padding: 0 20px;
            opacity: 0.6;
            letter-spacing: 0;
            margin-left: 26px;
        }
    }