<!-- 
    filename: IsraCheck.vue
    author: liubin
    date: 2023-12-06 09:50:13
    description: 
-->

<template>
	<Container name="ISRA缺陷检测" size="middle" style="">
		<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
			<div class="f" style="flex: 9;">
				<ISRAChart />
			</div>
			<ul
				class="legend"
				style="
					flex: 1;
					padding: 8px;
					display: flex;
					justify-content: center;
					gap: 20px;
					color: #fff;
					font-size: 14px;
				">
				<li class="fault-1">缺陷1</li>
				<li class="fault-2">缺陷2</li>
				<li class="fault-3">缺陷3</li>
				<li class="fault-4">缺陷4</li>
			</ul>
		</div>
	</Container>
</template>

<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
import ISRAChart from '../components/ISRAChart.vue';

export default {
	name: 'IsraCheck',
	components: { Container, ShadowRect, ISRAChart },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

li::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	position: absolute;
	top: 30%;
	left: -12px;
}

li.fault-1::before {
	background: #2760ff;
}
li.fault-2::before {
	background: #518eec;
}
li.fault-3::before {
	background: #0ee8e4;
}
li.fault-4::before {
	background: #ddb523;
}
</style>
