58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<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>
|