<template>
  <app-base class="app-bg">
    <div class='flex'>
      <article>
        <!--<route :comp="{name: 'phone-hand'}"></route>-->
        <!--<route :comp="{name: 'read-meter-info'}"></route>-->
        <!--<route :comp="{name: 'read-meter'}"></route>-->
        <!--<route :comp="{name: 'hand-info'}"></route>-->
        <route :comp="{name: 'readmeter-login'}"></route>
      </article>
    </div>
  </app-base>
</template>

<script>

export default {
}
</script>
<style>
  .app-bg {
    background: #F5F5F5;
  }
  .app-input {
    background: #FFF;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .app-input input, .app-input label {
    padding: 8px 10px;
    /*border: none;*/
    outline: none;
    margin: 0px;
  }
  app-input input{
    border: 1px solid skyblue;

  }
  app-input label{
    border: none;

  }
  .app-input input {
    border: 1px solid skyblue;
  }
  .app-btn {
    display: flex;
    width: 100%;
  }
  .app-btn button{
    flex: 1;
    border-radius: 17px;
    margin: 10px;
  }
  .app-btn button:focus, .app-btn button::selection {
    outline: none;
  }
  .app-list {
    margin-top: 8px;
    background: #FFF;
  }
  .app-list div {
    padding: 6px 10px;
  }
  .app-list div:first-child{
    border-bottom: 1px solid #ccc;
  }
  div[contenteditable=true]{
    height: 80px;
    width: 100%;
    outline: none;
    padding: 8px;
    overflow: scroll;
  }
</style>
