scd_tools_ui/src/styles/struct.scss

//网络结构图所有的css
.network-wrap .layout {
	padding: 2px 50px;
}

/* 父网络 */
.network-wrap {
	position: relative;
	width: 100%;
	height: 50vh;
}

.mainNetwork {
	height: 120px;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
}

.networkItem {
	position: relative;
	width: 130px;
	height: 112px;
	text-align: center;
	font-weight: 400;
	cursor: pointer;
}

// .networkItem .topMask{
// 	position: absolute;
// 	top: 0;
// 	left: 0;
// 	height: 100%;
// 	width: 100%;
// 	background: rgb(255 255 255 / 50%);
// }
//点击时的大类背景色
// .networkItem.active .topMask{
//     background: linear-gradient(to top,#4f50b95c,#fff9f900);
// 	border-bottom: 1px solid #00c;
// }
//大类的图片
.networkItem .topCont {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: center;
	background: #fff url('~@/assets/image/instruct/network_default.png') no-repeat center;
	background-size: 126px 112px;
	color: #7484AB;
}

//当前大类的图片
.networkItem.active .topCont {
	background: #fff url('~@/assets/image/instruct/network_hub.png') no-repeat center;
	background-size: 126px 112px;
}

.networkItem .topCont .subtitle {
	display: block;
	font-size: 16px;
	color: #7484AB;
}

.networkItem .title {
	position: absolute;
	top: 13px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
	font-size: 18px;
	color: #7484AB;
}

.networkItem.active .title {
	opacity: 1;
	color: #255CE7;
}

.networkItem.active .topCont,
.networkItem.active .topDesc {
	color: #255CE7;
	font-size: 18px;
}

.networkItem.active .topCont .subtitle {
	color: #FFCB11;
	font-size: 16px;
}

//大类下的小竖线
.networkItem .line {
	width: 4px;
	height: 20px;
	position: absolute;
	top: 100%;
	transform: translateY(1px);
	z-index: 2;
}

/* 子网络列表 */
.subNetwork {
	// margin-top: 62px;
	margin-top: 96px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

//每一个小的子网络
.subNetworkItem {
	position: relative;
	font-size: 12px;
	text-align: center;
	//主轴方向上，该元素的基础尺寸为其父容器宽度的11%。
	flex-basis: 11%;
	height: 120px;
}

//长竖线和小短线的样式
.subNetworkItem .subNetworkLine,
.subNetworkItem .subNetworkLine2 {
	width: 30px;
	display: block;
	position: absolute;
	bottom: 70px;
	border-width: 3px;
	border-style: solid;
	border-top: none;
	border-right: none;
}

//点击线条后小短线要进行消失处理，js动态设置
.subNetworkItem .subNetworkLine2 {
	border-style: none;
}

//点击时半遮盖效果
.subNetworkItem .subNetworkMask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(255 255 255 / 30%);
	z-index: 1;
}

.subNetworkItem:hover .subNetworkMask {
	background: none;
	cursor: pointer;
}

.subNetworkItem:hover .subNetworkID {
	color: #5C9CEE;
	font-size: 14px;
	cursor: pointer;
}

//子类的图片
.subNetworkItem .subNetworkImg {
	position: relative;
	left: 45%;
	transform: translateX(-50%);
}

.subNetworkInfo {
	// 元素的大小缩小到原来的90%。
	transform: scale(.9);
}

.subNetworkItem .subNetworkName {
	color: #1A2447;
	font-weight: medium;
	cursor: pointer;
}

.subNetworkItem .subNetworkID {
	color: #999;
}

.subNetworkItem .subNetworkImg img {
	width: 60px;
	height: 60px;
}

/* 长横线线条 */
.networkLine {
	position: absolute;
	top: 139px;
	left: 0;
	width: 100%;
	height: auto;
}

.networkLine .mainLine {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	cursor: pointer;
}

//线条左侧的标签样式
.mainLine .lineTag {
	width: 25px;
	text-align: center;
	font-size: 13px;
	transform: scale(0.9);
	font-weight: bold;
}

.mainLine .line {
	margin: 0;
	width: 100%;
	height: 6px;
	margin-left: -5px;
}

//点击线条时的背景透明色
.lineback {
	opacity: 0.3;
}