<template>
<div>
  <div class="top-box">
    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

    <div class="top-sl" >
      <div class="box-title">
        <span style="margin-right: 5px">本日流水总额</span>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

          <i class="el-icon-warning-outline"  slot="reference" ></i>
        </el-popover>
      </div>
      <div class="box-size">
        4023
      </div>
      <div class="box-but">
        <div class="icon-lv">
          <i class="el-icon-bottom"></i>
          <span>20.5%</span>
        </div>
        <div>环比</div>
        <div> <i class="el-icon-arrow-right"></i> </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
export default {
  name: "topindex",
  data(){
    return{

    }
  },
  methods:{

  }

}
</script>

<style scoped>
.top-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-sl{
  width: 16%;
  background: #FFFFFF;
  border-radius: 8px;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;

}
.box-title{
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
}
.box-size{
  font-size: 28px;
  font-weight: 400;
  color: rgba(0,0,0,0.9);
  margin-top: 5px;
  margin-bottom: 15px;
}
.box-but{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0,0,0,0.6);
  font-size: 14px;
}
.icon-lv{
  width: 71px;
  height: 24px;
  background: #E3F9E9;
  border-radius: 3px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #2BA471;
}
</style>
