【自用】uniapp全局统一样式scss管理

uniapp移动端全局common.scss样式统一类名管理

css 复制代码
page {
	background: #F7F7F7;
}

view {
	box-sizing: border-box;
}

.b-btn {
	width: 640rpx;
	height: 92rpx;
	background: linear-gradient(141deg, #3167F1 0%, #31A1F1 100%);
	border-radius: 100rpx 100rpx 100rpx 100rpx;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}
.custom_style {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;

		&_icon {
			background-color: #ffffff;
			font-size: 80rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -40rpx;
			@include flex-c-c;
			
			image{
				width: 65%;
				height: 65%;
			}
		}
	}


.tCenter {
	text-align: center;
}

.flex-1 {
	flex: 1;
}

.flex {
	display: flex;
}

.wrap {
	flex-wrap: wrap;
}

.column {
	flex-direction: column;
}

.row {
	flex-direction: row;
}

.jEnd {
	justify-content: flex-end;
}

.jStart {
	justify-content: flex-start;
}

.jEvenly {
	justify-content: space-evenly;
}

.aStart {
	align-items: flex-start;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.aCenter {
	display: flex;
	align-items: center;
}

.jCenter {
	display: flex;
	justify-content: center;
}

.jBetween {
	display: flex;
	justify-content: space-between;
}

.line1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.line2 {
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.line3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.fc{
	display: flex;
	flex-direction: column;
}
.w-100{
	width: 100%;
}
.fff{
	background-color: #FFFFFF;
}

// 定义字体(rpx)单位
@for $i from 9 through 40 {

	.u-font-#{$i},
	.fs#{$i} {
		font-size: $i + rpx;
	}
}

// 宽高
@for $i from 0 through 500 {
	.w#{$i} {
		width: $i + rpx !important;
	}

	.h#{$i} {
		height: $i + rpx !important;
	}
}

@for $i from 0 through 201 {
	.m#{$i} {
		margin: $i + rpx !important;
	}

	.p#{$i} {
		padding: $i + rpx !important;
	}

	@each $short, $long in l left, t top, r right, b bottom {
		.m#{$short}#{$i} {
			margin-#{$long}: $i + rpx !important;
		}

		.p#{$short}#{$i} {
			padding-#{$long}: $i + rpx !important;
		}
	}
}