100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<template>
|
||
<div class="statistics">
|
||
<div style="width: 200px;">
|
||
<el-icon class="iconStyle">
|
||
<PieChart />
|
||
</el-icon>
|
||
<span>商品种数</span>
|
||
<span>{{ datas.totalRow }}</span>
|
||
</div>
|
||
<div style="width: 300px;">
|
||
<el-icon class="iconStyle">
|
||
<SortUp />
|
||
</el-icon>
|
||
<div>
|
||
<div><span>增加数量：</span><span>0</span></div>
|
||
<div style="display: flex;">
|
||
<div>
|
||
<span>手动增加：</span><span>0</span>
|
||
</div>
|
||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||
<div>
|
||
<span>退货：</span><span>0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 400px;">
|
||
<el-icon class="iconStyle">
|
||
<SortDown />
|
||
</el-icon>
|
||
<div>
|
||
<div><span>减少数量：</span><span>0</span></div>
|
||
<div style="display: flex;">
|
||
<div>
|
||
<span>手动减少：</span><span>0</span>
|
||
</div>
|
||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||
<div>
|
||
<span>销售量：</span><span>0</span>
|
||
</div>
|
||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||
<div>
|
||
<span>报损：</span><span>0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import UserAPI from "@/api/product/index";
|
||
import { onMounted, reactive } from "vue";
|
||
onMounted(() => {
|
||
getPage();
|
||
})
|
||
let datas = reactive({
|
||
totalRow: 0
|
||
})
|
||
async function getPage() {
|
||
let res = await UserAPI.getPage();
|
||
datas.totalRow = res.totalRow
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.statistics {
|
||
border: 1px solid #e4e7ed;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
padding: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
>div {
|
||
height: 80px;
|
||
background-color: #f4f9ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
padding: 20px;
|
||
|
||
.iconStyle {
|
||
background-color: #d4e9fe;
|
||
border-radius: 50%;
|
||
padding: 6px;
|
||
font-size: 36px;
|
||
color: #3f9eff;
|
||
}
|
||
|
||
span {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
</style> |