charge_miniapp/pages/new-site/new-site.css

ax-body {
	display: block;
	height: 100%;
	background: #F6FAFF;
}
.site-body {
	position: relative;
}

.top-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	width: 100%;
	height: 520rpx;
	/* position: relative; */
}

.banner-swiper {
	width: 100%;
	height: 520rpx;
}

.banner-swiper-item {
	width: 100%;
	height: 100%;
}
.swiper-current{
	position: absolute;
	width: 72rpx;
	height: 34rpx;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 18rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 34rpx;
	right: 20rpx;
	bottom: 40rpx;
}
.swiper-item-image {
	width: 100%;
	height: 100%;
}

.site-content {
	width: 100%;
	position: absolute;
	top: 320rpx;
	background: linear-gradient(180deg, #ffffff 0%, #f6faff 82%, #f6faff 100%);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 0 20rpx 0 20rpx;
}

.top-site-info {
	margin-top: 28rpx;
}

.site-title {
	font-weight: 800;
	font-size: 32rpx;
	color: #2b303a;
}

.site-text {
	display: flex;
	align-items: center;
	gap: 16rpx;
	font-size: 24rpx;
	color: #aaaaaa;
	margin-top: 20rpx;
}

.site-text .icon {
	width: 30rpx;
	height: 30rpx;
}

.site-location {
	background: url("@/static/img/site-bg01.png");
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	margin-top: 20rpx;
}

.location-left .left-km {
	font-weight: bold;
	font-size: 28rpx;
	color: #2b303a;
}

.location-left .left-address {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #aaaaaa;
}

.location-rihgt {
	text-align: center;
	font-size: 24rpx;
	color: #181818;
}

.location-rihgt .right-icon {
	width: 40rpx;
	height: 40rpx;
}

.site-cost-info {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.cost-info-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cost-info-title .title-name {
	font-weight: bold;
	font-size: 32rpx;
	color: #2b303a;
}

.cost-info-title .check-info {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 24rpx;
	color: #aaaaaa;
}

.cost-price-info {
	margin-top: 24rpx;
	width: 654rpx;
	height: 240rpx;
	background: linear-gradient(90deg,
			#fee4c6 0%,
			rgba(251, 235, 198, 0.23) 100%);
	border-radius: 16rpx;
}

.cost-price-info .cost-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.cost-title .title-left {
	font-weight: bold;
	font-size: 28rpx;
	color: #2b303a;
	margin-left: 20rpx;
}

.cost-title .title-right {
	width: 125rpx;
	height: 52rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #ffffff;
	text-align: center;
	line-height: 52rpx;
	border-radius: 0rpx 16rpx 0rpx 40rpx;
	background: linear-gradient(90deg, #f32027 0%, #f67014 100%);
}

.cost-price {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-left: 20rpx;
}

.cost-price .cost-price-text {
	font-weight: 800;
	font-size: 48rpx;
	color: #ff6464;
}

.cost-price .cost-price-unit {
	font-size: 24rpx;
	color: #2b303a;
}

.time-cost-price {
	margin-top: 12rpx;
	font-size: 28rpx;
	color: #2b303a;
	margin-left: 20rpx;
}

.time-cost-number {
	font-size: 28rpx;
	color: #2b303a;
	margin-left: 20rpx;
	margin-top: 12rpx;
}

.firm-price-info-box {
	margin-top: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.current-price-info {
	width: 316rpx;
	background: #f6faff;
	border-radius: 16rpx;
	clip-path: polygon(0 0, 100% 0, 89% 100%, 0 100%);
	padding: 20rpx;
}

.current-price-title {
	font-weight: bold;
	font-size: 28rpx;
	color: #2b303a;
}

.current-price {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-top: 20rpx;
}

.current-price .current-price-text {
	font-weight: 800;
	font-size: 48rpx;
	color: #ff6464;
}

.current-price .current-price-unit {
	font-size: 24rpx;
	color: #2b303a;
}

.time-current-price {
	font-size: 28rpx;
	color: #2b303a;
	margin-top: 12rpx;
}

.time-current-number {
	font-size: 28rpx;
	color: #2b303a;
	margin-top: 20rpx;
	margin-bottom: 12rpx;
}

.firm-price-info {
	width: 346rpx;
	padding: 20rpx;
	background: linear-gradient(90deg,
			#fee4c6 0%,
			rgba(251, 235, 198, 0.23) 100%);
	clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
	border-radius: 16rpx;
}

.firm-border {
	width: 30rpx;
	height: 30rpx;
	background: #3eb6f8;
	border-radius: 50%;
	position: absolute;
	z-index: 9999;
	top: -20rpx;
}

.firm-price-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.firm-price-title .title-text {
	font-weight: bold;
	font-size: 28rpx;
	color: #f43921;
	margin-left: 20rpx;
}

.tags-price {
	position: absolute;
	right: -20rpx;
	top: -20rpx;
	width: 125rpx;
	height: 52rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #ffffff;
	text-align: center;
	line-height: 52rpx;
	border-radius: 0rpx 16rpx 0rpx 40rpx;
	background: linear-gradient(90deg, #f32027 0%, #f67014 100%);
}

.firm-price-box {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-top: 20rpx;
	margin-left: 20rpx;
}

.firm-price-text {
	font-weight: 800;
	font-size: 48rpx;
	color: #9b683c;
}

.firm-price-unit {
	font-size: 24rpx;
	color: #2b303a;
}

.current-pay-price-box {
	display: flex;
	align-items: center;
	gap: 40rpx;
	margin-left: 20rpx;
}

.pay-price .firm-old-price {
	font-size: 28rpx;
	color: #aaaaaa;
	text-transform: none;
}

.pay-price .discount-price {
	font-weight: bold;
	font-size: 28rpx;
	color: #ff6464;
	margin-top: 12rpx;
}

.current-pay-price-box .pay-price-icon {
	width: 58rpx;
	height: 120rpx;
}

.stopcar-tips {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-top: 20rpx;
}

.stopcar-tips .stopcar-tips-icon {
	width: 40rpx;
	height: 40rpx;
}

.stopcar-tips-text {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.stopcar-tips-text .tips-text-title {
	font-size: 28rpx;
	color: #2b303a;
}

.stopcar-tips-text .tips-text-mini {
	font-size: 28rpx;
	color: #aaaaaa;
}

.site-list-card {
	padding: 20rpx;
	background: #ffffff;
	border-radius: 16rpx;
	margin-top: 20rpx;
}

.site-select-tab {
	margin-top: 28rpx;
	gap: 20rpx;
}

.site-select-tab .select-item {
	width: 132rpx;
	height: 56rpx;
	background: #f6faff;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #aaaaaa;
	text-align: center;
	line-height: 56rpx;
	transition: opacity 0.3s ease-in-out;
}

.site-select-tab .selectItemActive {
	width: 132rpx;
	height: 56rpx;
	background: #3eb6f8;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
	transition: all 0.3s ease-in-out;
}

.site-select-tab .selectItemActive::before {
	opacity: 1;
}

.site-list-box {
	margin-top: 10rpx;
}

.terminal-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #f6f6f6;
	border-radius: 8px;
	height: 78px;
	padding: 10px;
}

.terminal-item+.terminal-item {
	margin-top: 10px;
}

.terminal-item .state {
	display: flex;
	width: 58px;
	height: 58px;
	border-radius: 100%;
	margin-right: 10px;
	padding: 4px;
	background-image: linear-gradient(to right,
			#ccc 0%,
			#ccc 35.8%,
			#c7cccf 65.9%,
			#e8e8e8 80.4%,
			#c8c8c8 100%);
}

.terminal-item .state .cake {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: #eee;
}

.terminal-item .state .icon {
	display: block;
	width: 20px;
	height: 20px;
}

.terminal-item .state .name {
	font-size: 12px;
	margin-top: 3px;
}

.terminal-item .info {
	flex: 1;
}

.terminal-item .info .name {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
}

.terminal-item .info .subinfo {
	font-size: 12px;
	color: #aaa;
}

.terminal-item .state.green {
	background-image: linear-gradient(to right,
			#73e6a0 0%,
			#3eff8a 30%,
			#4edc86 60%,
			#b4ffd1 75%,
			#6be49a 100%);
}

.terminal-item .state.green .cake {
	background-color: #ecfff4;
}

.terminal-item .state.blue {
	background-image: linear-gradient(to right,
			#3eb6f8 0%,
			#81d8ff 35%,
			#75ceff 65%,
			#94e2ff 80%,
			#2cb5ff 100%);
}

.terminal-item .state.blue .cake {
	background-color: #e9f9ff;
}

.terminal-item .state.orange {
	background-image: linear-gradient(to right,
			#ffe9bc 0%,
			#ffd070 35%,
			#ffd887 65%,
			#ffd887 80%,
			#ffc246 100%);
}

.terminal-item .state.orange .cake {
	background-color: #fff8eb;
}

.terminal-item .state.err {
	background-image: linear-gradient(to right,
			#ffc4c4 0%,
			#f77474 35%,
			#ffaaaa 65%,
			#ffaaaa 80%,
			#f55b5b 100%);
}

.terminal-item .state.err .cake {
	background-color: #ffe9e9;
}

.site-detail-line {
	margin-top: 20rpx;
	border: 2rpx solid #f0f0f0;
}

.site-detail-info {}

.site-detail-info .detail-info-item {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-top: 20rpx;
}

.detail-info-item .left-item {
	font-weight: 500;
	font-size: 28rpx;
	color: #2b303a;
}

.detail-info-item .right-item {
	font-size: 28rpx;
	color: #aaaaaa;
}
.footer{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	height: 84px;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	background-image: linear-gradient(to right,#fee4c6 0%,rgba(255,255,255,0.533) 75%,rgba(255,255,255,0) 100%);
	background-color: #fff;
}
.footer .price-wrap .price{
	font-size: 20px;
}
.scan{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	height: 50px;
	font-size: 14px;
	color: #2B303A;
	background-image: linear-gradient(to right,#8FF8FB,#47AEFF);
	margin: 0 10px;
}
.operation-symbol{
	font-size: 24rpx;
}
.price-wrap{
	display: flex;
	align-items: center;
}
.price-wrap .price{
	display: flex;
	align-items: flex-end;
	font-size: 24px;
	font-weight: bold;
	color: #F5531A;
	margin-left: 10px;
}
.price-wrap .price .symbol{
	display: inline-block;
	font-size: 12px;
	color: #F5531A;
	transform: translateY(-4px);
}
.price-wrap .unit{
	font-size: 12px;
	color: #aaa;
	margin-left: 15px;
}

.bg5{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;
	height: inherit;
}
.bg5 > .text{
	display: inline-block;
	position: absolute;
	font-family: 'ysbth';
	white-space: nowrap;
	top: 50%;
	left: 50%;
	transform: translate(-65%,-50%);
	font-size: 16px;
}
.bg5 > .bg{
	height: 100%;
}