zx_flk_app/pages/cabinetDetail/cabinetDetail.css

.bg-img {
	width: 100%;
	height: 420rpx;
	/* background-size: contain; */
}

.swiper {
	height: 420rpx;
}

.content .swiper-item-img {
	width: 100%;
	height: 100%;
}

.cabinet-detail {
	padding: 40rpx 32rpx;
	background: #FFFFFF;
	margin-bottom: 16rpx;
}

.cabinet-name-view {
	align-items: center;
	margin-bottom: 24rpx;
}

.cabinet-name {
	width: 360rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 48rpx;
	color: #2A3A5A;
}

.distance {
	font-weight: 500;
	font-size: 26rpx;
	color: #0074FF;
	background: #E5F1FF;
	border-radius: 20rpx;
	padding: 6rpx 20rpx;
}

.address {
	width: 640rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
	font-size: 32rpx;
	color: #9FA7B7;
	margin-bottom: 32rpx;
}

.cab_address {
	width: 312rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #828DA2;
	line-height: 24rpx;
	text-align: left;
	font-style: normal;
	padding-top: 16rpx;
}

.cab_distance {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
	line-height: 32rpx;
	font-style: normal;
	height: 40rpx;
	line-height: 40rpx;
}

.time-view {
	margin-bottom: 32rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #828DA2;
}

.time-img {
	width: 32rpx;
	height: 32rpx;
}

.time-text {
	margin-left: 4rpx;
}

.can-battery {
	height: 64rpx;
	line-height: 64rpx;
	background: #F3F8FF;
	border-radius: 16rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #2A3A5A;
	padding-left: 24rpx;
	margin-right: 6rpx;
}

.battery-num {
	font-family: DIN;
	font-weight: 500;
	font-size: 25rpx;
	color: #0074FF;
}

.nav-btn {
	width: 160rpx;
	height: 64rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	border: 2rpx solid #828DA2;
	font-weight: 500;
	font-size: 24rpx;
	color: #2A3A5A;
	align-items: center;
	padding-left: 36rpx;
	position: relative;
	right: -6rpx;
}

.nav-btn-img {
	width: 32rpx;
	height: 32rpx;
}

.nav-btn-text {
	margin-left: 8rpx;
}

.battery-list-view {
	background: #FFFFFF;
	padding: 48rpx 32rpx 32rpx 32rpx;
}

.no_battery {
	background: #F4F5F6;
	border-radius: 16rpx;
	width: 100%;
	color: #9FA7B7;
	text-align: center;
	padding-top: 14rpx;
	padding-bottom: 14rpx;
}

.battery-title {
	align-items: center;
	margin-bottom: 40rpx;
}

.blod-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #2A3A5A;
}

.cabinet-ref {
	font-weight: 400;
	font-size: 32rpx;
	color: #9FA7B7;
}

.battery-list-main {
	flex-wrap: wrap;
}

.battery-list {
	width: 31%;
	height: 304rpx;
	border-radius: 20rpx 20rpx 24rpx 24rpx;
	margin-bottom: 16rpx;
}

.battery-list-b {
	background: #F3F8FF;
	border-radius: 20rpx 20rpx 24rpx 24rpx;
}

.battery-list-s {
	background: rgba(244, 245, 246, 0.6);
	border-radius: 20rpx 20rpx 24rpx 24rpx;
}

.battery-list-g {
	background: #F4F5F6;
	border-radius: 20rpx 20rpx 24rpx 24rpx;
}

.battery-list-o {
	background: #FFF6EF;
	border-radius: 20rpx 20rpx 24rpx 24rpx;
}

/* 给除了第三个加右边距 */
.battery-list:nth-child(n+1):not(:nth-child(3n)):not(:last-child) {
	margin-right: 16rpx;
}

.namber-view {
	/* justify-content: center; */
}

.namber {
	width: 74rpx;
	height: 40rpx;
	border-radius: 20rpx 0rpx 20rpx 0rpx;
	font-size: 32rpx;
	color: #2A3A5A;
	text-align: center;
	font-family: DIN, DIN;
	font-weight: 600;
	text-align: center;
	font-style: normal;
}

.namber-g {
	background: #E7EBEF;
}

.namber-s {
	background: rgba(231, 235, 239, 0.6);
	color: #A7AFBC;
}

.namber-b {
	background: #E1EEFF;
}

.namber-o {
	background: #FFE5D2;
}

.status-img-view {
	justify-content: center;
	height: 208rpx;
	align-items: center;
	position: relative;
}

.status-img {
	width: 90rpx;
	height: 90rpx;
}

.tip-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	font-size: 26rpx;
	border-radius: 0rpx 0rpx 24rpx 24rpx;
}

.tip-text-g {
	background: #E7EBEF;
	color: #2A3A5A;
}

.tip-text-g1 {
	background: #E7EBEF;
	color: #A7AFBC;
}

.tip-text-u {
	background: #EDF1F3;
	color: #A7AFBC;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tip-text-b {
	background: #0074FF;
	color: #FFFFFF;
}

.tip-text-o {
	background: #FE8E33;
	color: #FFFFFF;
}

.progress-bar-view {
	position: absolute;
	top: -54rpx;
}

.battery-number {
	position: absolute;
	top: 150rpx;
	font-family: DIN;
	font-weight: 500;
	font-size: 24rpx;
	color: #5E6F90;
}

.cabinet-bottom {
	position: fixed;
	bottom: 1rpx;
	height: 266rpx;
	background: #FFFFFF;
	width: 100%;
}

.guide-view {
	height: 80rpx;
	background: #E7F2FF;
	padding-left: 32rpx;
}

.battery-img {
	width: 48rpx;
	height: 48rpx;
}

.guide-text {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #0074FF;
	margin-left: 8rpx;
}

.arrow-img {
	width: 28rpx;
	height: 28rpx;
}

.scan-btn-view {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx;
	width: 100%;
	height: 148rpx;
	position: relative;
}

.scan-btn {
	height: 80rpx;
	display: flex;
	flex: 1;
	background: #0074FF;
	border-radius: 40rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	justify-content: center;
	align-items: center;
}

.free-num-view {
	position: absolute;
	right: 32rpx;
	top: 14rpx;
	background: #FF571A;
	border-radius: 16rpx 0rpx 16rpx 0rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #FFFFFF;
	padding: 8rpx 24rpx 10rpx 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.free-num {
	font-family: DIN;
	font-weight: 500;
	font-size: 28rpx;
	margin: 0 3rpx;
}

.no-height {
	height: 266rpx;
}

/* 蓝牙弹窗 */
.modal-group {
	width: 100%;
	height: 100vh;
	background-color: rgba(27, 27, 27, 0.7);
	z-index: 9999;
	position: fixed;
	top: 0;
}

.def-alert {
	width: 568rpx;
	background-color: #fff;
	margin: 60% auto;
	box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.2);
	border-radius: 16rpx;
}

.alert-title {
	font-size: 16px;
	text-align: center;
	padding: 48rpx 20rpx 0 20rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: rgba(0, 0, 0, 0.85);
}

.alert-content {
	padding: 20rpx 0 48rpx 0;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	text-align: center;
}

.alert-footer {
	border-top: solid 2rpx #e9e9e9;
}

.alert-btn {
	width: 100%;
	text-align: center;
	padding: 32rpx 0;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #0074FF;
	line-height: 36rpx;
	text-align: center;
}

/* 开启蓝牙换电弹窗 */
.def-alert-bluetooth {
	width: 568rpx;
	background-color: #fff;
	margin: 40% auto;
	box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.2);
	border-radius: 16rpx;
}

.close-view {
	justify-content: flex-end;
	padding: 40rpx;
}

.close-icon {
	width: 32rpx;
	height: 32rpx;
}

.bluetooth-view {
	justify-content: center;
	margin-bottom: 48rpx;
}

.bluetooth-icon {
	width: 240rpx;
	height: 240rpx;
}

.need-bluetooth-text {
	width: 100%;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #2A3A5A;
	margin-bottom: 32rpx;
}

.need-bluetooth-tip {
	width: 100%;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #5E6F90;
	text-align: center;
	margin-bottom: 48rpx;
}

.bluetooth-connect-view {
	padding: 0 48rpx 48rpx 48rpx;
}

.bluetooth-connect-btn {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 80rpx;
	text-align: center;
	height: 80rpx;
	background: #0074FF;
	border-radius: 40rpx;
}

.payment-info-main {
	background-color: #ffffff;
	position: fixed;
	width: 100%;
	bottom: 0;
	border-top-left-radius: 32rpx;
	/* 左上角圆角 */
	border-top-right-radius: 32rpx;
	/* 右上角圆角 */

}

.payment-info-top {
	padding: 80rpx 32rpx 32rpx 32rpx;
	justify-content: center;
	position: relative;
}

.check-icon {
	width: 88rpx;
	height: 88rpx;
}

.fee-rules-top {
	padding: 32rpx 32rpx 32rpx 32rpx;
	justify-content: center;
	position: relative;
	font-size: 32rpx;
	color: #5E6F90;
}

.fee-rules-close {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}

.pay-money-text {
	margin-bottom: 16rpx;
}

.pay-money {
	font-family: DINAlternate, DINAlternate;
	font-weight: bold;
	font-size: 64rpx;
	color: #2A3A5A;
}

.fee-rules-main {
	background-color: #ffffff;
	position: fixed;
	width: 100%;
	bottom: 0;
	border-top-left-radius: 32rpx;
	/* 左上角圆角 */
	border-top-right-radius: 32rpx;
	padding: 0 32rpx;
}

.fee-rules-icon {
	width: 40rpx;
	height: 40rpx;
}

.fee-rules-view {
	height: 156rpx;
	background: #EEF6FF;
	border-radius: 16rpx;
	padding: 36rpx 24rpx 32rpx 24rpx;
	margin-bottom: 48rpx;
}

.fee-rules-title {
	margin-right: 16rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
}

.fee-rules-money-view {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.fee-rules-money {
	font-family: DIN;
	font-weight: 500;
	font-size: 36rpx;
	color: #0074FF;
}

.open-result-tip {
	width: 100%;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #828DA2;
	text-align: justify;
}

.over-btn-view {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 32rpx 0;
	width: 100%;
	height: 136rpx;
	position: relative;
}

.over-btn {
	height: 80rpx;
	display: flex;
	flex: 1;
	background: #0074FF;
	border-radius: 40rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	justify-content: center;
	align-items: center;
}

.pay-icon {
	width: 40rpx;
	height: 40rpx;
}

.pay-view {
	margin-bottom: 52rpx;
}

.pay-view-text {
	flex: 1;
	margin-left: 24rpx;
}

.wx-pay-icon {
	width: 32rpx;
	height: 32rpx;
}

.icon-box {
	display: grid;
	/* 	grid-template-columns: repeat(3, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(100rpx, auto));
	/* 创建4列，每列等宽 */
	gap: 20rpx;
	/* 网格间隙 */
	/* 如果需要间隙 */
	width: 100%;
	margin-bottom: 24rpx;
	/* margin-top: 64rpx; */
	margin-top: 10rpx;
	justify-content: start;
	/* 让网格项靠左 */
}

.item-tag {
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 16rpx;
	border: 2rpx solid #E7EAEE;
	padding-left: 14rpx;
	padding-right: 14rpx;
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	/* margin-right: 8rpx;
	margin-bottom: 8rpx; */
}

.tag_name {
	font-family: DIN, DIN;
	font-weight: 600;
	font-size: 30rpx;
	color: #2A3A5A;
	line-height: 32rpx;
	text-align: center;
	font-style: normal;
	/* white-space: nowrap */
}

.tag_num {
	font-family: DIN, DIN;
	font-weight: bold;
	font-size: 30rpx;
	color: #0074FF;
	line-height: 32rpx;
	text-align: left;
	font-style: normal;
}

.left_grid_1 {
	width: 222rpx;
	height: 140rpx;
	background: #F4F5F6;
	border-radius: 16rpx;
	padding-left: 24rpx;
	padding-top: 28rpx;
}

.left_grid_2 {
	width: 222rpx;
	height: 140rpx;
	background: #EBFFF8;
	border-radius: 16rpx;
	padding-left: 24rpx;
	padding-top: 28rpx;
}

.right_grid {
	width: 448rpx;
	height: 140rpx;
	background: #F3F8FF;
	border-radius: 16rpx;
	padding-left: 24rpx;
	padding-top: 28rpx;
	padding-right: 32rpx;
	flex-direction: row;
	display: flex;
}

.icon_grid {
	width: 40rpx;
	height: 40rpx;
}

.icon_grid_1 {
	width: 48rpx;
	height: 48rpx;
}

.grid_nav {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #2A3A5A;
	line-height: 24rpx;
	text-align: right;
	font-style: normal;
}

.grid_text_1 {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
	line-height: 32rpx;
	text-align: left;
	font-style: normal;
	margin-left: 8rpx;
}

.grid_text_rest {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #828DA2;
	line-height: 32rpx;
	text-align: left;
	font-style: normal;
	margin-left: 8rpx;
}

.grid_text_2 {
	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 26rpx;
	color: #828DA2;
	line-height: 24rpx;
	text-align: left;
	font-style: normal;
	margin-top: 16rpx;
}

.tag_type_n {
	height: 34rpx;
	line-height: 34rpx;
	background: #EDF1F3;
	color: #A7AFBC;
	border-radius: 17rpx;
	text-align: center;

	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 20rpx;

	font-style: normal;
	padding-left: 10rpx;
	padding-right: 10rpx;
}

.tag_type {
	height: 34rpx;
	line-height: 34rpx;
	background: #0074FF;
	border-radius: 17rpx;
	text-align: center;

	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 20rpx;
	color: #FFFFFF;
	font-style: normal;
	padding-left: 10rpx;
	padding-right: 10rpx;
}

.time_num {
	font-family: DIN;
	font-weight: 500;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 28rpx;
	text-align: right;
	font-style: normal;
	padding-left: 4rpx;
	padding-right: 4rpx;
}

.time_mark {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 28rpx;
	text-align: right;
	font-style: normal;
}

.model_center {
	/* width: 568rpx;
	height: 532rpx;
	margin-top: 100rpx; */
	position: fixed;
	width: 750rpx;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.pack_model {
	position: fixed;
	width: 568rpx;
	height: 532rpx;
	left: 91rpx;
	margin-top: 250rpx;
	z-index: 99;
}

.pack_model_text {
	position: fixed;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #5E6F90;
	line-height: 52rpx;
	text-align: center;
	font-style: normal;
	width: 472rpx;
	text-align: center;
	/* margin: 500rpx auto; */
	margin-top: 500rpx;
	margin-left: 139rpx;
	z-index: 999;
}

.look_package {
	position: fixed;
	width: 472rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #0074FF;
	border-radius: 40rpx;
	margin-left: 139rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	font-style: normal;
	margin-top: 654rpx;
	z-index: 999;
}

.line_view {
	position: fixed;
	width: 2rpx;
	height: 64rpx;
	border: 4rpx solid #FFFFFF;
	opacity: 0.6;
	margin-top: 782rpx;
	margin-left: 374rpx;
}

.close_package {
	width: 48rpx;
	height: 48rpx;
	margin-top: 846rpx;
	margin-left: 354rpx;
}
.cabinet-ref-text{
	font-family: DIN, DIN;
	font-weight: 600;
	font-size: 32rpx;
	color: #9FA7B7;
}