增加控制台组件及布局

src/style/fix.scss

@@ -1,6 +1,9 @@
 /* 覆盖element-plus样式 */
 
 :root {
+	--el-color-white: #ffffff;
+	--el-color-dark: #222222;
+
 	--el-color-primary: #1367C1;
 	--el-color-primary-light-1: #2a76c7;
 	--el-color-primary-light-2: #4285cd;

src/style/home.scss

@@ -0,0 +1,162 @@
+.cardBox{
+	background: #fff;
+	height: 100%;
+	border-radius: 8px;
+	padding: 12px;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	.cardTitle{
+		flex-basis: 30px;
+		font-weight: 500;
+		color: var(--el-color-dark);
+		font-size: 14px;
+	}
+	.cardBody{
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		.boxScrollbar{
+			display: flex;
+			align-items: center;
+		}
+	}
+}
+
+.headerBox{
+	.cardBox{
+		.inletView{
+			display: flex;
+			align-items: center;
+			.leftBox{
+				display: flex;
+				align-items: center;
+			}
+			.item{
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				margin-right: 30px;
+				.img{
+					width: 50px;
+				}
+				.text{
+					margin-top: 8px;
+				}
+			}
+			.add{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 0;
+				.icon{
+					background: #f2f2f2;
+					border-radius: 8px;
+					width: 50px;
+					height: 50px;
+				}
+				.text{
+					width: 50px;
+					text-align: center;
+				}
+			}
+		}
+		.newBell{
+			display: flex;
+			flex-wrap: wrap;
+			.item{
+				width: calc(50% - 10px);
+				margin-bottom: 15px;
+				box-sizing: border-box;
+				.title{
+					color: var(--el-color-dark);
+					font-weight: 500;
+					display: flex;
+					align-items: center;
+					font-size: 13px;
+					.status{
+						background: var(--el-color-danger);
+						color: var(--el-color-white);
+						font-weight: normal;
+						padding: 0 4px;
+						font-size: 12px;
+						border-radius: 3px;
+						margin-right: 6px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+				.com{
+					margin-top: 5px;
+					color: #888;
+				}
+				.text{
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					overflow: hidden;
+				}
+			}
+			.item:nth-child(odd){
+				margin-right: 10px;
+			}
+			.item:nth-child(even){
+				margin-left: 10px;
+			}
+		}
+	}
+}
+.middleBox{
+	.briefing{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.item{
+			width: calc(33% - 6px);
+			background: #E9F3FF;
+			box-sizing: border-box;
+			margin-top: 15px;
+			padding: 12px;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.comMain{
+				.num{
+					color: var(--el-color-dark);
+					font-size: 30px;
+					font-weight: 500;
+					.unit{
+						font-weight: normal;
+						font-size: 12px;
+					}
+				}
+				.name{
+					margin-top: 8px;
+					color: #555;
+				}
+			}
+			.comChart{
+				.icon{
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+		.item:nth-child(1),.item:nth-child(2),.item:nth-child(3){
+			margin-top: 0;
+		}
+		.item:nth-child(3n){
+			margin-right: 0;
+		}
+	}
+}
+
+.boxScrollbar{
+	.el-scrollbar__wrap{
+		display: flex;
+		align-items: center;
+	}
+}
+
+

src/style/style.scss

@@ -3,3 +3,4 @@
 @import 'pages.scss';
 @import 'media.scss';
 @import 'dark.scss';
+@import 'home.scss';