epmet-resi-rizhao/assets/scss/main.scss

//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

page {
	background-color: $bgc1;
}

.g-page {
	position: relative;
	padding-top: 138rpx;
	padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
}

.m-nav_tabs {
	@include bs1;
	width: 100%;
	display: flex;
	position: fixed;
	z-index: 9999;
	bottom: 0;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	background-color: #ffffff;
	.bg {
		position: absolute;
		display: block;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 144rpx;
		z-index: -1;
	}

	.tab-item {
		display: flex;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx;
		// min-height: 105rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column-reverse;
		text-align: center;
		flex: 1;
		color: #ccc;
		font-size: 22rpx;
		transition: backgroud-color 0.27s ease-in-out;

		&:active {
			// background-color: #fafbfc;
		}

		&.z-active {
			color: #e3271c;
			// background-color: #fafbfc;
		}

		.tab-text {
			margin-top: 10rpx;
			font-size: 22rpx;
			line-height: 24rpx;
			pointer-events: none;
			font-family: Source Han Serif SC;
			font-weight: 500;
		}

		.iconPath {
			position: relative;
			z-index: 1;
			width: 40rpx;
			height: 40rpx;
			pointer-events: none;
			overflow: visible;

			&.z-home2 {
				top: -4rpx;
				width: 74rpx;
				height: 74rpx;
				transform: scale(1.1);
			}

			&.z-home {
				top: -20rpx;

				&::after {
					position: absolute;
					z-index: -1;
					content: "";
					display: block;
					top: -20rpx;
					top: -100rpx;
					left: -100rpx;
					right: -100rpx;
					bottom: -100rpx;
					margin: auto;
					width: 80rpx;
					height: 80rpx;
					background: #e3271c;
					box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(209, 34, 24, 0.57);
					border-radius: 50%;
				}
			}
		}
	}
}

.m-title {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 50rpx;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #e3271c;
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
}

.m-guide {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	> image {
		width: 100%;
		height: 100vh;
	}
	.hint {
		position: absolute;
		right: 30rpx;
		top: 180rpx;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		background-color: rgba(#fff, 0.8);
		border-radius: 1rpx solid rgba(#000, 0.2);
		color: #333;
		display: flex;
		text-align: center;

		.cd {
			position: relative;
			width: 45%;
			&::after {
				content: "";
				position: absolute;
				display: block;
				bottom: 0;
				top: 0;
				right: 0;
				margin: auto 0;
				width: 1rpx;
				height: 30rpx;
				background-color: rgba(#000, 0.2);
			}
		}
		.btn {
			width: 55%;
			&.z-disabled {
				opacity: 0.5;
			}
		}
	}
}