diff --git a/src/components/scStatistic/index.vue b/src/components/scStatistic/index.vue
new file mode 100644
index 00000000..3a70cdab
--- /dev/null
+++ b/src/components/scStatistic/index.vue
@@ -0,0 +1,67 @@
+<!--
+ * @Descripttion: 统计数值组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月23日13:11:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-statistic">
+		<div class="sc-statistic-title">
+			{{ title }}
+			<el-tooltip v-if="tips" effect="light">
+				<template #content>
+					<div style="width: 200px;line-height: 2;">
+						{{ tips }}
+					</div>
+				</template>
+				<i class="el-icon-question sc-statistic-tips"></i>
+			</el-tooltip>
+		</div>
+		<div class="sc-statistic-content">
+			<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
+			<span class="sc-statistic-content-value">{{ cmtValue }}</span>
+			<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
+		</div>
+		<div v-if="description || $slots.default" class="sc-statistic-description">
+			<slot>
+			{{ description }}
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+			value: { type: String, required: true, default: "" },
+			prefix: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			description: { type: String, default: "" },
+			tips: { type: String, default: "" },
+			groupSeparator: { type: Boolean, default: false }
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+			cmtValue(){
+				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;}
+	.sc-statistic-tips {margin-left: 5px;}
+	.sc-statistic-content {font-size: 21px;color: #333;}
+	.sc-statistic-content-prefix {margin-right: 5px;}
+	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
+	.sc-statistic-description {margin-top: 10px;color: #999;}
+</style>
diff --git a/src/style/pages.less b/src/style/pages.less
index c4fbc7ed..5ff7d179 100644
--- a/src/style/pages.less
+++ b/src/style/pages.less
@@ -9,3 +9,8 @@
 .user-info-main li i {margin-right: 10px;}
 .user-info-bottom {border-top: 1px solid #e6e6e6;}
 .user-info-bottom h2 {font-size: 14px;margin:15px 0;}
+
+/*static-table*/
+.static-table {border-collapse: collapse;width: 100%;font-size: 14px;margin-bottom: 45px;line-height: 1.5em;}
+.static-table th {text-align: left;white-space: nowrap;color: #909399;font-weight: 400;border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;}
+.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
diff --git a/src/utils/tool.js b/src/utils/tool.js
index 72fb9ede..ca33f893 100644
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -73,7 +73,7 @@ const tool = {
 		return fmt;
 	},
 	/* 千分符 */
-	thousands(num){
+	groupSeparator(num){
 		num = num + '';
 		if(!num.includes('.')){
 			num += '.'
diff --git a/src/views/vab/statistic.vue b/src/views/vab/statistic.vue
new file mode 100644
index 00000000..0a76d649
--- /dev/null
+++ b/src/views/vab/statistic.vue
@@ -0,0 +1,137 @@
+<!--
+ * @Descripttion: 统计数值组件演示
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月23日10:28:17
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<el-row :gutter="15">
+				<el-col :lg="4">
+					<sc-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></sc-statistic>
+				</el-col>
+				<el-col :lg="4">
+					<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">
+					<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-main>
+</template>
+
+<script>
+	import scStatistic from '@/components/scStatistic';
+
+	export default {
+		name: 'statistic',
+		components: {
+			scStatistic
+		},
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.up {color: #F56C6C;margin-left: 5px;}
+	.down {color: #67C23A;margin-left: 5px;}
+</style>