food/src/views/layout/components/main/order/stat.vue

75 lines
1.8 KiB
Vue
Raw Normal View History

<template>
<div class="app-container">
<!-- 用户select选项 -->
<el-row :gutter="15" class="m-t-0">
<el-col :span="4">
<SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
</el-col>
<el-col :span="8">
<DatePickerOrder class="w-100" />
</el-col>
</el-row>
<!-- 统计标签 -->
<el-row :gutter="10" class="m-t-20">
<el-col :span="8">
<div class="statBox rad4 flex p-10">
<div class="flex3 flex mc column">
<div class="flex">
<div class="p-4 bg-white rad2 fc-b fb">成交额</div>
<div class="p-4 m-l-5">23441.44</div>
</div>
<div class="flex m-t-5">
<div class="p-4 bg-white rad2 fc-b fb">退款额</div>
<div class="p-4 m-l-5">23441.44</div>
</div>
<div class="flex m-t-5">
<div class="p-4 bg-white rad2 fc-b fb">订单总数</div>
<div class="p-4 m-l-5">18</div>
</div>
</div>
<div class="flex1 flex mc mac">
<div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50"></div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import SelectionShopId from '@/components/SelectionShopId.vue'
import DatePickerOrder from '@/components/DatePickerOrder.vue'
export default {
name: 'Stat',
data () {
return {
shop_id: '' // 搜索条件 商铺id
}
},
components: {
SelectionShopId,
DatePickerOrder
},
computed: {
},
methods: {
},
watch: {
},
created () {
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/theme.scss";
.statBox {
background-color: $brand-color;
height: 30vh;
color: $white-color;
}
</style>