Vue

by Mariya_Korotkova

HTML

<div id="app">
  <div class="orderGrid">
    <div class="column left-column">
      <div v-for="(value, key) in orderInfo">
      {{key}}
      </div>
    </div>
    <div class="column">
      <div v-for="(value, key) in orderInfo">
      {{value}}
      </div>
    </div>
  </div>
  <ul>
  <li v-for="n in 10">{{ n }}</li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.orderGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
.column {
  display: grid;
  row-gap: 12px;
}

.left-column {
  text-align: right;
}

Vue

new Vue({
  el: "#app",
  data: {
   orderInfo: {
   "Номер заявки": "Req1234567", 
   "Услуга (маршрут)": "Подключение/продажа \ Новый клиент \ Новый абонент", 
   "Этап": "Выполнение подключения",
   "Время работ": "5 августа 2021 г. 18:00 - 20:00",
   "Временный пароль": "68576849"
   }
  }
})