<template>
  <div class="ma-bg">
    <!-- 水箱 -->
    <div class="main">
      <span style="color: #5695ed;">水箱水量</span>
      <div class="bg">
        <span class="lin-z"></span>
      </div>
    </div>
    <div class="main" style="margin-left: 20px;">
      <span style="color: #5695ed;">油箱油量</span>
      <div class="bg">
        <span class="lin-z"></span>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.ma-bg {
 display: flex;
  margin-top: 10px;
  .main{
    width: 350px;
  height: 150px;
  background: #fff;
  padding: 8px 10px;
//   overflow-y: scroll;
  }
  .bg {
    position: relative;
    width: 54px;
    height: 120px;
    background: linear-gradient(
      180deg,
      rgba(0, 221, 22, 0.3) 0,
      rgba(0, 221, 22, 0.3) 33%,
      rgba(221, 119, 0, 0.3) 66%,
      rgba(221, 31, 0, 0.3)
    );
    .lin-z{
        position: absolute;
        left: 17px;
        bottom: 0;
        display: inline-block;
        width: 20px;
        height: 100px;
        background: #0f41a6;
        opacity: .5;
    }
  }
}
::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

::-webkit-scrollbar {
  width: 6px;
}
</style>
