zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update statistic.vue

This commit is contained in:
sc 2021-06-23 15:27:30 +08:00
parent 671bae81f8
commit 98a0997598
1 changed files with 16 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/vab/statistic.vue
View File

@ -9,103 +9,28 @@
<template>
<el-main>
<el-card shadow="never">
<el-row :gutter="15">
<el-col :lg="4">
<el-alert title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等." type="success" style="margin:20px 0;"></el-alert>
<el-row :gutter="15">
<el-col :lg="8">
<el-card shadow="never">
<sc-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></sc-statistic>
</el-col>
<el-col :lg="4">
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<sc-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
比昨日<span class="up"><i class="el-icon-top"></i>+7.7%</span>
</sc-statistic>
</el-col>
<el-col :lg="4">
</el-card>
</el-col>
<el-col :lg="8">
<el-card shadow="never">
<sc-statistic title="留言" value="112893" suffix="条" groupSeparator>
比昨日<span class="down"><i class="el-icon-bottom"></i>-18.9%</span>
</sc-statistic>
</el-col>
</el-row>
</el-card>
<el-card shadow="never" style="margin-top: 15px;">
<h2 style="margin: 20px 0;">Attributes</h2>
<table class="static-table">
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>标题</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>数值</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>prefix</td>
<td>数值的前缀</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>suffix</td>
<td>数值的后缀</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>description</td>
<td>描述</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>tips</td>
<td>显示在标题右侧的提示图标</td>
<td>String</td>
<td>—</td>
<td>-</td>
</tr>
<tr>
<td>groupSeparator</td>
<td>是否格式化千分符</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
</tbody>
</table>
<h2 style="margin: 20px 0;">Slots</h2>
<table class="static-table">
<thead>
<tr>
<th>Name</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>default</td>
<td>自定义描述内容</td>
</tr>
</tbody>
</table>
</el-card>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
@ -132,6 +57,7 @@
</script>
<style scoped>
.el-card {margin-bottom: 15px;}
.up {color: #F56C6C;margin-left: 5px;}
.down {color: #67C23A;margin-left: 5px;}
</style>