app-station-control-frontend_v1/components/IndexStatus/IndexStatus.vue

<template>
	<view class="plc-color">
		<view class="default-box" :class="color"></view>
		<view>{{text}}</view>
	</view>
</template>

<script>
	export default {
		props:['text','color'],
		name:"IndexStatus",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.plc-color{
		display: flex;
		height: 20px;
		margin-right: 10px;
		align-items: center;
		.default-box{
			width: 8px;
			height: 8px;
			border-radius: 1px;
			margin-top: 2px;
			margin-right: 2px;
			font-size: 12px;
		}
		.green{background: #91FDB9;}
		.orange{background: #ED7735;}
		.yellow{background: #F6BB47;}
		.pink{background: #FF6E6E;}
		.default{background: #414A63;}
	}
</style>