56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<el-card shadow="never" header="当前已用量">
|
|
<el-progress :text-inside="true" :stroke-width="20" :color="color" :percentage="value" :format="format"/>
|
|
<el-row :gutter="15" style="margin-top: 20px;">
|
|
<el-col :lg="6">
|
|
<el-card shadow="never">
|
|
<sc-statistic title="文档" value="7.41" suffix="GB" groupSeparator></sc-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="6">
|
|
<el-card shadow="never">
|
|
<sc-statistic title="图片" value="12.90" suffix="GB" groupSeparator></sc-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="6">
|
|
<el-card shadow="never">
|
|
<sc-statistic title="视音频" value="68.79" suffix="MB" groupSeparator></sc-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="6">
|
|
<el-card shadow="never">
|
|
<sc-statistic title="其他" value="17.58" suffix="GB" groupSeparator></sc-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import scStatistic from '@/components/scStatistic';
|
|
|
|
export default {
|
|
components: {
|
|
scStatistic
|
|
},
|
|
data() {
|
|
return {
|
|
value: 39.58,
|
|
color: [
|
|
{ color: '#67C23A', percentage: 40 },
|
|
{ color: '#E6A23C', percentage: 60 },
|
|
{ color: '#F56C6C', percentage: 80 },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
format(percentage){
|
|
return percentage + "G"
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|