<template>
  <div class="power-layout">
    <p>各展馆访问量</p>
    <ul>
      <li v-for="(item, i) in data.list" :key="i">
        <span :title="item.name">{{ item.name }}</span>：
        <div
          :style="{ width: `${(item.visit / data.all) * 100}%` }"
          class="bar"
        ></div>
        <div class="visit">{{ item.visit }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      sum: 25,
    };
  },
};
</script>

<style lang="less" scoped>
.power-layout {
  padding: 20px;
  height: 100%;

  > p {
    margin-bottom: 20px;
  }

  > ul {
    height: 86%;
    overflow-y: auto;
    width: 100%;

    > li {
      display: flex;
      margin-bottom: 20px;
      align-items: center;

      > span {
        cursor: pointer;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }

      .bar {
        width: 100%;
        height: 20px;
        background: #01a7f0;
      }

      .visit {
        margin-left: 10px;
      }
    }
  }
}
</style>
