<script>
export default {
  name: "AppRealtimePanel",
  label: "实况面板",
  data() {
    return {
      list: [
        {label: "总销售", prop: "a"},
        {label: "常规销售", prop: "a1"},
        {label: "节令销售", prop: "a2"},
        {label: "有效订单数", prop: "a3"},
        {label: "常规客单数", prop: "a4"},
        {label: "会员有效订单占比", prop: "a5"},
        {label: "报损率", prop: "a6"},
        {label: "报损金额", prop: "a7"},
        {label: "外卖销售占比", prop: "a8"},
      ]
    }
  }
}
</script>

<template>
  <section class="AppRealtimePanel">
    <div v-for="item in list" :key="item.prop" class="item">
      <div v-text="item.label"/>
      <div class="value" v-text="item.prop"/>
    </div>
  </section>
</template>

<style scoped>
.AppRealtimePanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}

.AppRealtimePanel .item {
  background: url("http://10.0.97.209/img/kengee/kengee14.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  white-space: nowrap;
}

.AppRealtimePanel .item .value {
  font-family: Helvetica;
  font-size: 20px;
  color: #66FFFF;
  line-height: 38px;
}
</style>
