zx_flk_app/pages/battery/battery.css

.container-view {
	background-color: #ffffff;
	/* height: 100vh; */
}

.battery-info {
	width: 100%;
	height: 600rpx;
	background-image: linear-gradient(to bottom, #aed3ff, #ffffff);
	background-size: cover;
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
}

.img_position {
	position: absolute;
	margin-top: 50rpx;
}


.prograss_circle {
	width: 100%;
	height: 100%;
}

.battery_img {
	/* background-image: linear-gradient(to bottom, #d1e6ff, #ffffff); */
	position: absolute;
	width: 29%;
	top: 388rpx;
	height: 38%;
}


.battery-frist {
	background-color: #ffffff;
	padding-top: 20rpx;
	flex-direction: column;
	/* position: relative;
	top: 88rpx; */
}

.endurance-img {
	background: url('https://qiniu.bms16.com/FnMv6hmSPr7F8ag5b231Ud0djlMb') no-repeat;
	background-size: cover;
	position: relative;
	width: 346rpx;
	height: 72rpx;
	line-height: 72rpx;
	margin-bottom: 64rpx;
}

.endurance-img text {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: 500;
	font-family: DIN;
	position: absolute;
	left: 184rpx;
}

.icon-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 创建4列，每列等宽 */
	gap: 10px;
	/* 网格间隙 */
	/* 如果需要间隙 */
	width: 80%;
	margin-bottom: 48rpx;
	/* margin-top: 64rpx; */
	margin-top: -20rpx;
}

/* .my_function {
  width: 100%;
} */

.my_function {
	margin-top: 20rpx;
	width: 140rpx;
}

.my_icon {
	width: 80rpx;
	height: 80rpx;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
}

.my_icon_1 {
	width: 112rpx;
	height: 80rpx;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
}

.my_title {
	color: #131415;
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	margin-top: 12rpx;
	text-align: center;
	vertical-align: middle;
}

.battery-btn {
	width: 90%;
	font-size: 32rpx;
	font-weight: 600;
	align-items: center;
}

.battery-btn>view:nth-of-type(1) {
	width: 70%;
	color: #ffffff;
	background-color: #0074FF;
	text-align: center;
	padding-top: 25rpx;
	padding-bottom: 25rpx;
	border-radius: 51rpx 0 0 51rpx;
}

.battery-btn>view:nth-of-type(2) {
	width: 30%;
	color: #0074FF;
	background-color: #E5F1FF;
	text-align: center;
	padding-top: 25rpx;
	padding-bottom: 25rpx;
	border-radius: 0 51rpx 51rpx 0;
	font-family: PingFangSC, PingFang SC;
}



.battery-second {
	background-color: #ffffff;
	padding: 80rpx 32rpx 40rpx;
	/* position: relative;
	    bottom: -85rpx; */
}

.battery-second>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: bold;
}

.battery-second>view:nth-of-type(2) {
	color: #9FA7B7;
	font-size: 32rpx;
}

.battery-bottom {
	background-color: #ffffff;
	padding: 0 32rpx 48rpx;
	/* position: relative;
	bottom: -86rpx; */
}

.battery-bottom>view:nth-of-type(2) {
	color: #9FA7B7;
	font-size: 32rpx;
}

.bottom-time {
	color: #2A3A5A;
	font-size: 54rpx;
	align-items: baseline;
	font-family: DIN;
	font-weight: bold;
}

.bottom-time text {
	color: #2A3A5A;
	font-size: 24rpx;
	margin-right: 6rpx;
}

.bottom-time>view {
	color: #9FA7B7;
	font-size: 24rpx;
}

.battery-bottom>view:nth-of-type(2) {
	color: #ffffff;
	font-size: 32rpx;
	background-color: #0074FF;
	padding: 16rpx 48rpx;
	border-radius: 40rpx;
}

.return-box,
.renew-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

.return-item {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background-color: #ffffff;
	padding: 40rpx 32rpx 74rpx;
	z-index: 100;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.return-title {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: 600;
	margin-bottom: 32rpx;
	line-height: 40rpx;
}

.return-item img {
	width: 32rpx;
	height: 32rpx;
	vertical-align: middle;
}

.return-text {
	color: #2A3A5A;
	font-size: 28rpx;
	margin-bottom: 64rpx;
	width: 100%;
	line-height: 52rpx;
}

.return-btn>view:nth-of-type(1) {
	color: #0074FF;
	font-size: 32rpx;
	font-weight: 500;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #E5F1FF;
	border-radius: 40rpx 0rpx 0rpx 40rpx;
	width: 100%;
	/* padding: 24rpx 0; */
}

.return-btn>view:nth-of-type(2) {
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: 500;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #0074FF;
	border-radius: 0rpx 40rpx 40rpx 0rpx;
	width: 100%;
	/* padding: 24rpx 0; */
}

.renew-item {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background-color: #ffffff;
	padding-top: 40rpx;
	z-index: 100;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 80%;
}

.renew-title {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: bold;
	margin: 0 32rpx;
}

.plan-info {
	padding: 40rpx 24rpx 0 32rpx;
	background-color: #ffffff;
}

.plan-type {
	margin-bottom: 40rpx;
}

.ptype-item {
	background-color: #E7F2FF;
	border-radius: 24rpx;
	width: 204rpx;
	padding: 68rpx 22rpx 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.ptyped-item {
	background-color: #ffffff;
	border: 4rpx solid #0074FF;
	box-sizing: border-box;
	border-radius: 24rpx;
	width: 248rpx;
	padding: 44rpx 24rpx 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.ptype-title {
	color: #5E6F90;
	font-size: 28rpx;
}

.ptype-text {
	color: #2A3A5A;
	font-size: 28rpx;
}

.ptype-text text {
	font-size: 40rpx;
}

.ptyped-text {
	color: #F95151;
	font-size: 28rpx;
}

.ptyped-text text {
	font-size: 60rpx;
}

.plan-time>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 32rpx;
	font-weight: bold;
}

.quantity-count>input {
	width: 88rpx;
	background-color: #F3F8FF;
	text-align: center;
	border-radius: 24rpx;
}

.count-btn {
	font-size: 40rpx;
	font-weight: bold;
	width: 40rpx;
	text-align: center;
}

.fbtn {
	color: #9FA7B7;
}

.coupon-info {
	margin-top: 32rpx;
}

.coupon-info>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 32rpx;
	font-weight: bold;
}

.coupon-info>view:nth-of-type(2) {
	color: #F95151;
	font-size: 32rpx;
}

.coupon-info img {
	width: 28rpx;
	height: 28rpx;
	vertical-align: middle;
	margin-left: 8px;
}

.guarantee-info {
	background-color: #ffffff;
	padding: 64rpx 32rpx 0rpx;
}

.guarantee-info>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
}

.guarantee-title {
	margin-bottom: 40rpx;
}

.guarantee-title>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: bold;
}

.guarantee-title>view:nth-of-type(2) {
	color: #9FA7B7;
	font-size: 32rpx;
	font-weight: 400;
}

.select-guarantee {
	background-color: #F3F8FF;
	border-radius: 24rpx;
}

.selected-guarantee {
	border: 4rpx solid #0074FF;
	box-sizing: border-box;
	border-radius: 24rpx;
}

.select-guarantee,
.selected-guarantee {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 32rpx 20rpx;
	box-sizing: border-box;
}

.guarantee-top {
	color: #2A3A5A;
	font-size: 28rpx;
	font-weight: bold;
	align-items: center;
}

.guarantee-top img {
	width: 62rpx;
	height: 56rpx;
	margin-bottom: 16rpx;
}

.guarantee-center {
	margin-top: 32rpx;
}

.center-item {
	font-size: 24rpx;
	width: 178rpx;
	margin-bottom: 16rpx;
}

.center-item>view:nth-of-type(1) {
	color: #828DA2;

}

.center-item>view:nth-of-type(2) {
	color: #0074FF;
}

.guarantee-border {
	border-bottom: 2rpx dashed #CFDCEF;
	width: 100%;
	margin-top: 24rpx;
	margin-bottom: 14rpx;
}

.guarantee-bottom {
	align-items: center;
}

.guarantee-bottom>view:nth-of-type(1) {
	color: #F95151;
	font-size: 38rpx;
	margin-bottom: 14rpx;
}

.blue-t {
	color: #0074FF;
	font-size: 24rpx;
}

.black-t {
	color: #2A3A5A;
	font-size: 24rpx;
}

.guarantee-bottom img {
	width: 24rpx;
	height: 24rpx;
}

.assort-info {
	background-color: #ffffff;
	padding: 48rpx 32rpx 0;
	margin-bottom: 270rpx;
}

.assort-info>view:nth-of-type(1) {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
}

.assort-text view {
	width: 342rpx;
	padding: 24rpx;
	color: #2A3A5A;
	font-size: 32rpx;
	font-weight: bold;
	background-color: #F3F8FF;
}

.assort-text>view:nth-of-type(1) {
	border-radius: 16rpx 0 0 16rpx;
	margin-right: 4rpx;
}

.assort-text>view:nth-of-type(2) {
	border-radius: 0 16rpx 16rpx 0;
}

.payment-info {
	background-color: #ffffff;
	padding: 28rpx 32rpx 48rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.payment-top {
	color: #2A3A5A;
	font-size: 28rpx;
}

.payment-top text {
	color: #0074FF;
	font-size: 28rpx;
}

.payment-top img {
	width: 32rpx;
	height: 32rpx;
	margin-right: 16rpx;
	vertical-align: middle;
}

.payment-bottom {
	margin-top: 42rpx;
	width: 100%;
}

.bottom-left {
	color: #F95151;
	font-size: 36rpx;
	font-weight: bold;
}

.bottom-left>view:nth-of-type(2) {
	color: #0074FF;
	font-size: 28rpx;
	margin-left: 16rpx;
}

.bottom-left img {
	width: 19rpx;
	height: 19rpx;
	vertical-align: middle;
	margin-left: 4rpx;
}

.payment-bottom>view:nth-of-type(2) {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	padding: 28rpx 86rpx;
	border-radius: 44rpx;
	background: linear-gradient(to right, #0074FF 0%, #00D7FF 100%);
}

.img_car_on {
	width: 45rpx;
	height: 45rpx;
	vertical-align: middle;
	margin-right: 16rpx;
	margin-top: -16rpx;
}

.lock_img {
	width: 47rpx;
	height: 50rpx;
	vertical-align: middle;
	margin-right: 16rpx;
	margin-top: -10rpx;
}

.shadow {
	box-shadow: inset 0rpx 2rpx 6rpx 0rpx #FFFFFF;
	width: 456rpx;
	height: 456rpx;
	position: relative;
	top: 82rpx;
	border-radius: 50%;
	background: conic-gradient(from -122deg, #0074FF 0%, #0AEEFF var(--progress), #cfe6ff 0% 245deg, transparent 245deg 360deg);
	mask: radial-gradient(transparent 200rpx, #000 200rpx);
	-webkit-mask: radial-gradient(transparent 210rpx, #000 213rpx);
}

.quantity_box {
	display: flex;
	position: absolute;
	flex-direction: column;
	flex-wrap: nowrap;
	top: 190rpx;
	align-items: center;
}

.num_quantity {
	font-family: DIN;
	font-weight: bold;
	font-size: 112rpx;
	color: #0074FF;
	line-height: 96rpx;
	text-align: center;
	font-style: normal;
}

.endurance-img {
	background: url('https://qiniu.bms16.com/FnMv6hmSPr7F8ag5b231Ud0djlMb') no-repeat;
	background-size: cover;
	position: relative;
	width: 346rpx;
	height: 72rpx;
	line-height: 72rpx;
}

.endurance-img text {
	color: #2A3A5A;
	font-size: 40rpx;
	font-weight: 500;
	font-family: DIN;
	position: absolute;
	left: 184rpx;
}

.position {
	/* 假设gap是10px，需要减去 */
	position: relative;
}

.red_tip {
	top: -36rpx;
	position: absolute;
	/* right: 0rpx; */
	width: 120rpx;
	height: 40rpx;
	background: #FF571A;
	border-radius: 16rpx 0rpx 16rpx 0rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #FFFFFF;
	line-height: 20rpx;
	text-align: right;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-car {
	color: #5B677D;
	height: 300rpx;
	display: flex;
	width: 100%;
	font-size: 30rpx;
	justify-content: center;
	align-items: center;
}