large_screen/src/components/belt_diagnosis/dianji1/index.vue

<template>
  <div>
    <div class="title">驱动电机1</div>
    <ul class="flex-ul">
      <li>电机功率<span>:15654</span> KW</li>
      <li>电压<span>:15</span> V</li>
      <li>转速<span>:15</span> r/min</li>
      <li>扭矩<span>:15</span> Nm</li>
      <li>前轴温<span>:15</span> ℃</li>
      <li>后轴温<span>:15</span> ℃</li>
      <li>A相绕组温度<span>1500</span>℃</li>
      <li>B相绕组温度<span>150897</span>℃</li>
      <li>C相绕组温度<span>15</span>℃</li>
      <li>油压<span>:15</span> Pa</li>
      <li>振动<span>:15</span> mm</li>
      
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
.title {
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  margin-top: 10px;
}
// .item {
//   display: grid;
//   grid-template-columns: repeat(3, 1fr);
//   grid-template-rows: 1fr 1fr 1fr 1fr;
// }
// .item1 span:nth-of-type(1) {
//   /* display: block; */
//   text-align: left;
//   color: #4adefe;
//   font-size: 15px;
// }

// .item1 span:nth-of-type(2) {
//   display: block;
//   color: white;
//   /* text-align: center; */
//   font-size: 20px;
// }
.flex-ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  width: 100%;

  flex-flow: row wrap;
  li {
    // font-size: 17px;
    font-size: 14px;
    width: -webkit-fit-content;
    flex: 0 1 33%;
    margin: 10px 0 0 -10px;
    // line-height: 50px;
    color: #4adefe;
  }
  span{
    color: #fff;
  }
}
/* ul {
  margin-top: 10px;
}
li {
  width: 100%;
  height: 100%;
  
  display: flex;
  font-size: 1.25rem;
  position: relative;
  line-height: 50px;
  padding-left: 40px;
} */
.spanitem {
  /* display: inline-block; */
  /* width: 10px; */
  color: #f3f5f7;
  padding-left: 100px;
}
</style>