构建框架

src/components/scMini/scStatusIndicator.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Descripttion: 状态指示器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日09:30:12
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-state" :class="[{'sc-status-processing':pulse}, 'sc-state-bg--'+type]"></span>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: { type: String, default: "primary" },
+			pulse: { type: Boolean, default: false }
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
+	.sc-status-processing {position: relative;}
+	.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
+
+	.sc-state-bg--primary {background: var(--el-color-primary);}
+	.sc-state-bg--success {background: var(--el-color-success);}
+	.sc-state-bg--warning {background: var(--el-color-warning);}
+	.sc-state-bg--danger {background: var(--el-color-danger);}
+	.sc-state-bg--info {background: var(--el-color-info);}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+		30% {
+			opacity: 0.7;
+		}
+		100% {
+			transform: scale(2.5);
+			opacity: 0;
+		}
+	}
+</style>

src/components/scMini/scTrend.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Descripttion: 趋势标记
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日11:07:10
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-trend" :class="'sc-trend--'+type">
+		<el-icon v-if="iconType=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
+		<el-icon v-if="iconType=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
+		<el-icon v-if="iconType=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
+		<em class="sc-trend-prefix">{{prefix}}</em>
+		<em class="sc-trend-value">{{modelValue}}</em>
+		<em class="sc-trend-suffix">{{suffix}}</em>
+	</span>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: Number, default: 0 },
+			prefix: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			reverse: { type: Boolean, default: false }
+		},
+		computed: {
+			absValue(){
+				return Math.abs(this.modelValue);
+			},
+			iconType(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v = 'N'
+				}else if(this.modelValue > 0){
+					v = 'P'
+				}
+				return v
+			},
+			type(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v =  this.reverse?'P':'N'
+				}else if(this.modelValue > 0){
+					v =   this.reverse?'N':'P'
+				}
+				return v
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-trend {display: flex;align-items: center;}
+	.sc-trend-icon {margin-right: 2px;}
+	.sc-trend em {font-style: normal;}
+	.sc-trend-prefix {margin-right: 2px;}
+	.sc-trend-suffix {margin-left: 2px;}
+	.sc-trend--P {color: #f56c6c;}
+	.sc-trend--N {color: #67c23a;}
+	.sc-trend--Z {color: #555;}
+</style>