<template>
|
<div class="home-page-compontent-a" v-loading="loading">
|
<div class="pannel-title">当前库存数量</div>
|
<el-scrollbar>
|
<div class="num-flex-containter">
|
<div class="num-block-item" v-for="(item,index) in list" :key="index">
|
<div class="num-view"><span class="text">{{item.Count}}</span></div>
|
<div class="serious-view">{{item.SeriesName}}</div>
|
<div class="name-view">{{item.CargoTypeName}}</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name:'homePageCompontentA',
|
data(){
|
return {
|
loading:false,
|
list:[]
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.getData()
|
},
|
getData(){
|
this.loading = true;
|
this.$api.post('HomePageGetVStoreGroupBy',{},{block:'home'}).then((d)=>{
|
this.list = d.data || []
|
this.loading = false;
|
}).catch(()=>{
|
this.loading = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home-page-compontent-a{
|
height: 100%;
|
padding: 24px 24px 1px 24px;
|
box-sizing: border-box;
|
.num-flex-containter{
|
display: flex;
|
}
|
.num-block-item{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 40px 40px 24px 40px;
|
flex-shrink: 0;
|
&>*{
|
display: flex;
|
justify-content: center;
|
}
|
.num-view{
|
font-size: 36px;
|
.text{
|
padding: 0 8px 4px 8px;
|
border-bottom: 1px solid #797979;
|
}
|
}
|
.serious-view{
|
font-family: Arial Normal;
|
font-size: 14px;
|
padding-top: 2px;
|
}
|
.name-view{
|
font-family: Arial Normal;
|
font-size: 14px;
|
color: #289bff;
|
padding-top: 20px;
|
}
|
}
|
}
|
</style>
|
