@fmdeui/fmui 1.0.28 → 1.0.29

package/theme-chalk/src/layout.scss

@@ -0,0 +1,655 @@
+
+
+.layout-columns-aside {
+	:deep(.el-scrollbar) {
+	height: calc(100% - 50px);
+    }
+	width: var(--el-columnsMenuWidth);
+	height: 100%;
+	background: var(--next-bg-columnsMenuBar);
+	ul {
+		position: relative;
+		.layout-columns-active,
+		.layout-columns-active a {
+			color: var(--next-bg-columnsMenuBarColor) !important;
+			transition: 0.3s ease-in-out;
+		}
+		.layout-columns-hover {
+			color: var(--el-color-primary);
+			a {
+				color: var(--el-color-primary);
+			}
+		}
+		li {
+			color: var(--next-bg-columnsMenuBarColor);
+			width: 100%;
+			height: var(--el-columnsMenuHeight);
+			text-align: center;
+			display: flex;
+			cursor: pointer;
+			position: relative;
+			z-index: 1;
+			&:hover {
+				//@extend .layout-columns-hover;
+				background-color: var(--el-color-primary-light-3);
+			}
+			.columns-vertical {
+				margin: auto;
+				.columns-vertical-title {
+					padding-top: 1px;
+				}
+			}
+			.columns-horizontal {
+				display: flex;
+				height: var(--el-columnsMenuHeight);
+				width: 100%;
+				align-items: center;
+				padding: 0 5px;
+				i {
+					margin-right: 3px;
+				}
+				a {
+					display: flex;
+					.columns-horizontal-title {
+						padding-top: 1px;
+					}
+				}
+			}
+			a {
+				text-decoration: none;
+				color: var(--next-bg-columnsMenuBarColor);
+			}
+		}
+		.columns-round {
+			background: var(--el-color-primary);
+			color: var(--el-color-white);
+			position: absolute;
+			left: 50%;
+			top: 2px;
+			height: var(--el-columnsMenuRoundHeight);
+			width: var(--el-columnsMenuRoundWidth);
+			transform: translateX(-50%);
+			z-index: 0;
+			transition: 0.5s ease-in-out;
+			border-radius: 5px;
+		}
+		.columns-card {
+			@extend .columns-round;
+			top: 0;
+			height: var(--el-columnsMenuHeight);
+			width: 100%;
+			border-radius: 0;
+		}
+	}
+}
+
+.layout-logo {
+	height: var(--el-columnsLogoHeight);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 8px;
+	margin-top: 5px;
+	animation: logoAnimation 0.3s ease-in-out;
+	&-medium-img {
+		width: auto;
+		height: 80%;
+	}
+	&:hover {
+		img {
+			animation: logoAnimation 0.3s ease-in-out;
+		}
+	}
+}
+
+
+.user-news-container {
+	.content-box {
+		font-size: 12px;
+		.notice-box {
+			height: 400px;
+	
+			padding: 0 5px;
+			overflow-y: auto;
+		}
+		.notice-item {
+			display: flex;
+
+			padding: 10px 0;
+			border-bottom: 1px dashed var(--el-border-color);
+
+			&-icon {
+				margin: 0 15px;
+				display: inline-flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			&:hover {
+				background-color: var(--el-color-primary-light-9);
+				cursor: pointer;
+			}
+			.notice-title {
+				font-size: 14px;
+				font-weight: 600;
+				
+			}
+			
+			.notice-content {
+				color: var(--el-text-color-secondary);
+				margin: 10px 0;
+			}
+			.notice-time {
+				color: var(--el-text-color-secondary);
+				text-align: right;
+			}
+		}
+	}
+	.notice-foot {
+		height: 35px;
+		width: 100%;
+		color: var(--el-color-primary);
+		font-size: 14px;
+		cursor: pointer;
+	
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		border-top: 1px solid #eee;
+		padding-top: 9px;
+	}
+}
+.el-tabs {
+	:deep(.el-tabs__header) {
+		margin: 0;
+	}
+	.el-tab-pane {
+		display: flex;
+		flex-direction: column;
+	}
+}
+.layout-navbars-breadcrumb-user {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+
+	&-link {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+
+		&-photo {
+			width: 25px;
+			height: 25px;
+			border-radius: 100%;
+		}
+	}
+
+	&-icon {
+		padding: 0 10px;
+		cursor: pointer;
+		color: var(--next-bg-topBarColor);
+		height: 50px;
+		line-height: 50px;
+		display: flex;
+		align-items: center;
+
+		&:hover {
+			background: var(--next-color-user-hover);
+
+			i {
+				display: inline-block;
+				animation: logoAnimation 0.3s ease-in-out;
+			}
+		}
+	}
+
+	:deep(.el-dropdown) {
+		color: var(--next-bg-topBarColor);
+	}
+
+	:deep(.el-badge) {
+		height: 40px;
+		line-height: 40px;
+		display: flex;
+		align-items: center;
+	}
+
+	:deep(.el-badge__content.is-fixed) {
+		top: 12px;
+	}
+}
+.layout-search-dialog {
+	position: relative;
+	:deep(.el-dialog) {
+		background-color: transparent;
+		box-shadow: none;
+
+		.el-dialog__header,
+		.el-dialog__body {
+			display: none;
+		}
+		.el-dialog__footer {
+			width: 100%;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			top: -53vh;
+		}
+	}
+	:deep(.el-autocomplete) {
+		width: 560px;
+		position: absolute;
+		top: 150px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+.layout-navbars-breadcrumb-index {
+	height: 50px;
+	display: flex;
+	align-items: center;
+	background: var(--next-bg-topBar);
+	border-bottom: 1px solid var(--next-border-color-light);
+}
+
+.layout-navbars-breadcrumb {
+	flex: 1;
+	height: inherit;
+	display: flex;
+	align-items: center;
+	.layout-navbars-breadcrumb-icon {
+		cursor: pointer;
+		font-size: 18px;
+		color: var(--next-bg-topBarColor);
+		height: 100%;
+		width: 40px;
+		opacity: 0.8;
+		&:hover {
+			opacity: 1;
+		}
+	}
+	.layout-navbars-breadcrumb-span {
+		display: flex;
+		opacity: 0.7;
+		color: var(--next-bg-topBarColor);
+	}
+	.layout-navbars-breadcrumb-iconfont {
+		font-size: 16px;
+		margin-right: 5px;
+	}
+	:deep(.el-breadcrumb__separator) {
+		opacity: 0.7;
+		color: var(--next-bg-topBarColor);
+	}
+	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+		font-weight: unset !important;
+		color: var(--next-bg-topBarColor);
+		&:hover {
+			color: var(--el-color-primary) !important;
+		}
+	}
+}
+
+.layout-navbars-tagsview {
+	background-color: var(--el-color-white);
+	border-bottom: 1px solid var(--next-border-color-light);
+	position: relative;
+	z-index: auto;
+	:deep(.el-scrollbar__wrap) {
+		overflow-x: auto !important;
+	}
+	&-ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		height: 34px;
+		display: flex;
+		align-items: center;
+		color: var(--el-text-color-regular);
+		font-size: 12px;
+		white-space: nowrap;
+		padding: 0 15px;
+		&-li {
+			height: 26px;
+			line-height: 26px;
+			display: flex;
+			align-items: center;
+			border: 1px solid var(--el-border-color-lighter);
+			padding: 0 15px;
+			margin-right: 5px;
+			border-radius: 2px;
+			position: relative;
+			z-index: 0;
+			cursor: pointer;
+			justify-content: space-between;
+			&:hover {
+				background-color: var(--el-color-primary-light-9);
+				color: var(--el-color-primary);
+				border-color: var(--el-color-primary-light-5);
+			}
+			&-iconfont {
+				position: relative;
+				left: -5px;
+				font-size: 12px;
+			}
+			&-icon {
+				border-radius: 100%;
+				position: relative;
+				height: 14px;
+				width: 14px;
+				text-align: center;
+				line-height: 14px;
+				right: -5px;
+				&:hover {
+					color: var(--el-color-white);
+					background-color: var(--el-color-primary-light-3);
+				}
+			}
+			.layout-icon-active {
+				display: block;
+			}
+			.layout-icon-three {
+				display: none;
+			}
+		}
+		.is-active {
+			color: var(--el-color-white);
+			background: var(--el-color-primary);
+			border-color: var(--el-color-primary);
+			transition: border-color 3s ease;
+		}
+	}
+	// 风格4
+	.tags-style-four {
+		.layout-navbars-tagsview-ul-li {
+			margin-right: 0 !important;
+			border: none !important;
+			position: relative;
+			border-radius: 3px !important;
+			.layout-icon-active {
+				display: none;
+			}
+			.layout-icon-three {
+				display: block;
+			}
+			&:hover {
+				background: none !important;
+			}
+		}
+		.is-active {
+			background: none !important;
+			color: var(--el-color-primary) !important;
+		}
+	}
+	// 风格5
+	.tags-style-five {
+		align-items: flex-end;
+		.tags-style-five-svg {
+			mask-image:
+				url('data:image/svg+xml,<svg width="35" height="71" viewBox="0 0 35 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00012207 0.5C-0.00012207 70.5 -5.89311e-05 70.5 34.9999 70.5H-0.00012207V27.7586V0.5Z" fill="black"/></svg>'),
+				url('data:image/svg+xml,<svg width="35" height="70" viewBox="0 0 35 70" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 0C35 70 34.9999 70 0 70H35V27.2586V0Z" fill="black"/></svg>'),
+				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
+			mask-size:
+				20px 20px,
+				20px 20px,
+				calc(100% - 29px) calc(100% + 17px);
+			mask-position:
+				right bottom,
+				left bottom,
+				center top;
+			mask-repeat: no-repeat;
+			-webkit-mask-image:
+				url('data:image/svg+xml,<svg width="35" height="71" viewBox="0 0 35 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00012207 0.5C-0.00012207 70.5 -5.89311e-05 70.5 34.9999 70.5H-0.00012207V27.7586V0.5Z" fill="black"/></svg>'),
+				url('data:image/svg+xml,<svg width="35" height="70" viewBox="0 0 35 70" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 0C35 70 34.9999 70 0 70H35V27.2586V0Z" fill="black"/></svg>'),
+				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
+			-webkit-mask-size:
+				20px 20px,
+				20px 20px,
+				calc(100% - 29px) calc(100% + 17px);
+			-webkit-mask-position:
+				right bottom,
+				left bottom,
+				center top;
+			-webkit-mask-repeat: no-repeat;
+		}
+		.layout-navbars-tagsview-ul-li {
+			padding: 0 5px;
+			border-width: 15px 27px 15px;
+			border-style: solid;
+			border-color: transparent;
+			margin: 0 -15px;
+			.layout-icon-active,
+			.layout-navbars-tagsview-ul-li-iconfont,
+			.layout-navbars-tagsview-ul-li-refresh {
+				display: none;
+			}
+			.layout-icon-three {
+				display: block;
+			}
+			&:hover {
+				@extend .tags-style-five-svg;
+				background: var(--el-color-primary-light-7);
+				color: unset;
+			}
+		}
+		.is-active {
+			@extend .tags-style-five-svg;
+			background: var(--el-color-primary-light-2) !important;
+			color: var(--next-bg-main-color) !important;
+			z-index: 1;
+		}
+	}
+}
+.layout-navbars-tagsview-shadow {
+	box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
+}
+
+.custom-contextmenu {
+	transform-origin: center top;
+	z-index: 2190;
+	position: fixed;
+	.el-dropdown-menu__item {
+		font-size: 12px !important;
+		white-space: nowrap;
+		i {
+			font-size: 12px !important;
+		}
+	}
+}
+.layout-navbars-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+.el-menu-horizontal-warp {
+	flex: 1;
+	overflow: hidden;
+	margin-right: 30px;
+	:deep(.el-scrollbar__bar.is-vertical) {
+		display: none;
+	}
+	:deep(a) {
+		width: 100%;
+	}
+	.el-menu.el-menu--horizontal {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+	}
+}
+.layout-logo {
+	width: 240px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
+	color: var(--el-color-primary);
+	font-size: 16px;
+	cursor: pointer;
+	// animation: logoAnimation 0.3s ease-in-out;
+	span {
+		white-space: nowrap;
+		display: inline-block;
+		font-weight: 900;
+		font-size: 18px;
+	}
+	&:hover {
+		span {
+			// color: var(--color-primary-light-1);
+			animation: logoAnimation 0.5s ease-in-out;
+		}
+		img {
+			animation: logoAnimation 0.5s ease-in-out;
+		}
+	}
+	&-medium-img {
+		width: 15%;
+		margin-right: 5px;
+		padding: 1px;
+	}
+}
+.layout-logo-size {
+	width: 100%;
+	height: 50px;
+	display: flex;
+	cursor: pointer;
+	animation: logoAnimation 0.3s ease-in-out;
+	&-img {
+		width: 35px;
+		margin: auto;
+	}
+	&:hover {
+		img {
+			animation: logoAnimation 0.3s ease-in-out;
+		}
+	}
+}
+.layout-footer {
+	width: 100%;
+	display: flex;
+
+	&-warp {
+		margin: auto;
+		color: var(--el-text-color-secondary);
+		text-align: center;
+		animation: error-num 0.3s ease;
+	}
+}
+
+.layout-link-container {
+	.layout-link-warp {
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		i.layout-link-icon {
+			position: relative;
+			font-size: 100px;
+			color: var(--el-color-primary);
+			&::after {
+				content: '';
+				position: absolute;
+				left: 50px;
+				top: 0;
+				width: 15px;
+				height: 100px;
+				background: linear-gradient(
+					rgba(255, 255, 255, 0.01),
+					rgba(255, 255, 255, 0.01),
+					rgba(255, 255, 255, 0.01),
+					rgba(255, 255, 255, 0.05),
+					rgba(255, 255, 255, 0.05),
+					rgba(255, 255, 255, 0.05),
+					rgba(235, 255, 255, 0.5),
+					rgba(255, 255, 255, 0.05),
+					rgba(255, 255, 255, 0.05),
+					rgba(255, 255, 255, 0.05),
+					rgba(255, 255, 255, 0.01),
+					rgba(255, 255, 255, 0.01),
+					rgba(255, 255, 255, 0.01)
+				);
+				transform: rotate(-15deg);
+				animation: toRight 5s linear infinite;
+			}
+		}
+		.layout-link-msg {
+			font-size: 12px;
+			color: var(--next-bg-topBarColor);
+			opacity: 0.7;
+			margin-top: 15px;
+		}
+	}
+}
+
+.upgrade-dialog {
+	:deep(.el-dialog) {
+		.el-dialog__body {
+			padding: 0 !important;
+		}
+		.el-dialog__header {
+			display: none !important;
+		}
+		.upgrade-title {
+			text-align: center;
+			height: 130px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				background-color: var(--el-color-primary-light-1);
+				width: 130%;
+				height: 130px;
+				border-bottom-left-radius: 100%;
+				border-bottom-right-radius: 100%;
+			}
+			.upgrade-title-warp {
+				z-index: 1;
+				position: relative;
+				.upgrade-title-warp-txt {
+					color: var(--next-color-white);
+					font-size: 22px;
+					letter-spacing: 3px;
+				}
+				.upgrade-title-warp-version {
+					color: var(--next-color-white);
+					background-color: var(--el-color-primary-light-4);
+					font-size: 12px;
+					position: absolute;
+					display: flex;
+					top: -2px;
+					right: -50px;
+					padding: 2px 4px;
+					border-radius: 2px;
+				}
+			}
+		}
+		.upgrade-content {
+			padding: 20px;
+			line-height: 22px;
+			.upgrade-content-desc {
+				color: var(--el-color-info-light-5);
+				font-size: 12px;
+			}
+		}
+		.upgrade-btn {
+			border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
+			display: flex;
+			justify-content: space-around;
+			padding: 15px 20px;
+			.el-button {
+				width: 100%;
+			}
+		}
+	}
+}