<template>
	<div class="fishbone">
		<div class="main-line"></div>
		<div class="top-bone">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="top-bone1">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="top-bone2">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-bone">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-bone1">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-bone2">
			<div class="left-bone">
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>

					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
				<div class="left-bone-item">
					<div class="icon">
						<img src="../../assets/images/company-logo1.png" alt="" />
					</div>
					<div class="text">{{ "商汤科技" }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
				<div class="right-bone-item">
					<div class="line"></div>
					<div class="text">{{ "华为" }}</div>
					<div class="icon">
						<img src="../../assets/images/company-logo2.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { getChainFishbone } from "@/api/exportControl";
import { onMounted, ref } from "vue";
const chainId = ref("");
const chainFishbone = ref([]);
onMounted(async () => {
	try {
		const chainFishboneData = await getChainFishbone(chainId.value);
		chainFishbone.value = chainFishboneData ?? [];
	} catch (error) {
		console.log(error);
	}
});
</script>

<style lang="scss" scoped>
.fishbone {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: 40px;
	.main-line {
		position: absolute;
		top: 280px;
		right: 0;
		width: 888px;
		height: 3px;
		background: rgba(174, 208, 255, 1);
	}
}
.top-bone {
	position: absolute;
	top: 20px;
	right: 200px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.top-bone1 {
	position: absolute;
	top: 20px;
	right: 500px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.top-bone2 {
	position: absolute;
	top: 20px;
	right: 800px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.bottom-bone {
	position: absolute;
	top: 280px;
	right: 360px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.bottom-bone1 {
	position: absolute;
	top: 280px;
	right: 660px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.bottom-bone2 {
	position: absolute;
	top: 280px;
	right: 960px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		// background: orange;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			// background: #fff;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		// background: pink;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;

			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}

			.text {
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
