css 常用布局样式

:root {
	--back: #F8F8F8;
	--primary: #409EFF;
	--warning: #E6A23C;
	--success: #67C23A;
	--info: #6c757d;
	--danger: #F56C6C;
	--border: 1px solid var(--primary);
}

/* 弹窗组件 */
.confirm {
	width: 100%;
	height: calc(100vh);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 998;
	/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 绝对定位 水平垂直居中显示 */
.mian {
	width: 92%;
	/* background-color: #f8f8f8; */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* 绝对定位 固定底部 */
.bottom {
	width: 100%;
	height: 150rpx;
	position: absolute;
	left: 0;
	bottom: 0;
}

/* 按钮样式 背景颜色 */
.h-btn {
	width: 92%;
	margin: 6rpx auto;
}

.h-btn-radius {
	width: 92%;
	margin: 6rpx auto;
	border-radius: 50rpx;
}

.h-bth-submit {
	width: 92%;
	margin: 6rpx auto;
	color: #fff;
	background-color: #409EFF;
}

.h-btn-reset {
	width: 92%;
	margin: 6rpx auto;
	border: var(--border);
	color: var(--primary);
	background-color: #FFFFFF;
}

.h-bgc-primary {
	background-color: var(--primary);
	color: #FFF;
}

.h-bgc-warning {
	background-color: var(--warning);
	color: #FFF;
}

.h-bgc-danger {
	background-color: var(--danger);
	color: #FFF;
}

.h-bgc-info {
	background-color: var(--info);
	color: #FFF;
}

.h-bgc-success {
	background-color: var(--success);
	color: #FFF;
}


/* 弹性布局 */
.h-flex {
	display: flex;
}

.h-flex-around {
	display: flex;
	justify-content: space-around;
}

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

/* 内外边距 */
.h-m-auto {
	margin: auto;
}

.h-m-1 {
	margin: 4rpx;
}

.h-m-2 {
	margin: 8rpx;
}

.h-m-3 {
	margin: 12rpx;
}

.h-m-4 {
	margin: 16rpx;
}

.h-mt-1 {
	margin-top: 4rpx;
}

.h-mt-2 {
	margin-top: 8rpx;
}

.h-mt-3 {
	margin-top: 12rpx;
}

.h-mt-4 {
	margin-top: 16rpx;
}

.h-mr-1 {
	margin-right: 4rpx;
}

.h-mr-2 {
	margin-right: 8rpx;
}

.h-mr-3 {
	margin-right: 12rpx;
}

.h-mr-4 {
	margin-right: 16rpx;
}

.h-mb-1 {
	margin-bottom: 4rpx;
}

.h-mb-2 {
	margin-bottom: 8rpx;
}

.h-mb-3 {
	margin-bottom: 12rpx;
}

.h-mb-4 {
	margin-bottom: 16rpx;
}

.h-ml-1 {
	margin-left: 4rpx;
}

.h-ml-2 {
	margin-left: 8rpx;
}

.h-ml-3 {
	margin-left: 12rpx;
}

.h-ml-4 {
	margin-left: 16rpx;
}

.h-p-auto {
	padding: auto;
}

.h-p-1 {
	padding: 4rpx;
}

.h-p-2 {
	padding: 8rpx;
}

.h-p-3 {
	padding: 12rpx;
}

.h-p-4 {
	padding: 16rpx;
}

.h-pt-1 {
	padding-top: 4rpx;
}

.h-pt-2 {
	padding-top: 8rpx;
}

.h-pt-3 {
	padding-top: 12rpx;
}

.h-pt-4 {
	padding-top: 16rpx;
}

.h-pr-1 {
	padding-right: 4rpx;
}

.h-pr-2 {
	padding-right: 8rpx;
}

.h-pr-3 {
	padding-right: 12rpx;
}

.h-pr-4 {
	padding-right: 16rpx;
}

.h-pb-1 {
	padding-bottom: 4rpx;
}

.h-pb-2 {
	padding-bottom: 8rpx;
}

.h-pb-3 {
	padding-bottom: 12rpx;
}

.h-pb-4 {
	padding-bottom: 16rpx;
}

.h-pl-1 {
	padding-left: 4rpx;
}

.h-pl-2 {
	padding-left: 8rpx;
}

.h-pl-3 {
	padding-left: 12rpx;
}

.h-pl-4 {
	padding-left: 16rpx;
}

.h-pl-5 {
	padding-left: 25rpx;
}

/* 宽高 */
.h-w10 {
	width: 10%;
}

.h-w20 {
	width: 20%;
}

.h-w30 {
	width: 30%;
}

.h-w40 {
	width: 40%;
}

.h-w45 {
	width: 45%;
}

.h-w50 {
	width: 50%;
}

.h-w60 {
	width: 60%;
}

.h-w65 {
	width: 65%;
}

.h-w70 {
	width: 70%;
}

.h-w80 {
	width: 80%;
}

.h-w90 {
	width: 90%;
}

.h-w100 {
	width: 100%;
}


/* 输入框 */
input {
	border: var(--border);
	height: 80rpx;
}

button::after {
	border: none;
}

.h-input-title {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
}

.h-bottom-line {
	border-bottom: 1px solid #ddd;
}

/* 字体大小 */
.h-f1 {
	font-size: 10rpx;
}

.h-f2 {
	font-size: 20rpx;
}

.h-f3 {
	font-size: 30rpx;
}

.h-f4 {
	font-size: 40rpx;
}

.h-f5 {
	font-size: 50rpx;
}