构建框架

src/components/scStatistic/index.vue

@@ -0,0 +1,70 @@
+<!--
+ * @Descripttion: 统计数值组件
+ * @version: 1.1
+ * @Author: sakuya
+ * @Date: 2021年6月23日13:11:32
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年5月14日19:55:09
+-->
+
+<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>
+				<el-icon class="sc-statistic-tips"><el-icon-question-filled/></el-icon>
+			</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;display: flex;align-items: center;}
+	.sc-statistic-tips {margin-left: 5px;}
+	.sc-statistic-content {font-size: 20px;color: #333;}
+	.sc-statistic-content-value {font-weight: bold;}
+	.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;}
+
+	.dark .sc-statistic-content {color: #d0d0d0;}
+</style>