cloud_admin_app/pages/index/index.scss

.mainBg {
		width: 100vw;
		position: fixed;
		top: 0;
		height: 100vh;
		background: linear-gradient(180deg, #4C91FF 0%, #3698FD 11.35%, #73CBFD 21.65%, #94EBFF 37.35%, #EAF4F8 97.71%);
		z-index: -1;
	}

	.change_version {
		display: flex;
		align-items: center;
		color: #000;
	}

	.tab_headers {
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.topNav {
		position: absolute;
		top: 180rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		background: #fff;
		width: 90%;
		display: flex;
		align-items: center;
		border-radius: 15rpx;
	}
	.notice_position {
				// width: 100%;
				position: absolute;
				top: 280rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
				width: 90%;
	}

	.posi_imgs {
		position: absolute;
		// background: #fff;
		// padding: 5rpx;
		right: 30rpx;
		bottom: -10rpx;
		z-index: 999;
	}

	.cu-bar {
		color: #fff;

		.search-form {
			// width: 300rpx;
			background-color: #E2E2E2;
			margin: unset;
		}

		.searchPoint {
			// width: 500rpx;
			height: 36rpx;
		}
	}

	.tabList {
		.stateStyle {
			padding: 8rpx 16rpx;
			color: #808A96;
			background-color: #E2E2E2;
			margin-left: 16rpx;
			font-size: 28rpx;
		}
	}




	.titleName {
		color: #333333;
		font-weight: 400;
		font-size: 36rpx;
		// letter-spacing: 1px;
	}

	.addressInf {
		width: 442rpx;
		color: #666666;
		font-size: 28rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		// margin:16rpx 0 0rpx 0;
	}

	.listInf {
		width: 490rpx;
		flex-direction: column;
		justify-content: space-between;
		height: 178rpx;
	}

	.mapBtn {
		height: 178rpx;
		align-items: flex-end;
		// background-color: greenyellow;
	}

	.goMap {
		width: 24rpx;
		height: 24rpx;
		background: url('/static/home/goMap.svg') no-repeat;
		background-size: 100% 100%;
	}

	.moreLocal {
		margin-left: 10rpx;
	}

	.regionName {
		letter-spacing: 3rpx;
	}

	.stateImg {
		width: 164rpx;
		height: 164rpx;
		background-color: #eee;
		border-radius: 8rpx;

		.titleImg {
			border-radius: 8rpx;
		}
	}


	.searchImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/search.svg') no-repeat;
		background-size: 100% 100%;
	}

	.chargeImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/pay.svg') no-repeat;
		background-size: 100% 100%;
	}

	.subscribeImg {
		width: 72rpx;
		height: 72rpx;
		background: url('../../static/home/subscribe.svg') no-repeat;
		background-size: 100% 100%;
		position: relative;

		.cu-tag {
			background-color: #F2634F;
			font-size: 24rpx;
			font-weight: 400;
		}

		.cu-tag.badge {
			border: 1px solid #fff;
			right: -17rpx;
			height: 34rpx;
		}

	}

	.wrap {
		width: 100%;
	}


	.stateFlex {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}

	.cu-card>.cu-item {
		margin: 0 32rpx 16rpx 32rpx;
	}

	.stateImg .cu-tag.badge {
		width: 100rpx;
		height: 40rpx;
		top: 0rpx;
		left: 0rpx;
		right: 90rpx;
		padding: 8rpx 0rpx;
		background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
		border-radius: 4px;
		font-size: 24rpx;
		text-align: center;
	}

	.bg-blue {
		background-image: linear-gradient(to right bottom, #A5C7FF, #2690FB);
	}

	.stateImg .cu-tag .bgPlane {
		padding: 0rpx 8rpx;
		background: rgba(255, 255, 255, 0);
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.card-nav {
		padding: 32rpx;

		.navStyle {
			border-radius: 16rpx;
		}
	}

	.swiperCard {
		margin: 16rpx 32rpx 0rpx 32rpx;
		position: relative;

		
	}

	.cu-bar .search-form {
		background-color: #fff;
	}

	.cu-card .cu-item,
	.radius {
		border-radius: 16rpx;
	}

	.none-box {
		width: 100vw;
		display: flex;
		justify-content: center;

		.image-none {
			width: 320rpx;
			height: 452rpx;
		}
	}

	.battery-num {
		width: 20rpx;
		height: 32rpx;
	}

	.bat-use {
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 1px;
		color: #333333;
		margin-left: 16rpx;
		line-height: 28rpx;
	}

	.bat-total {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 1px;
		color: #333333;
		line-height: 26rpx;
	}

	.card-box {
		padding: 32rpx;
		box-shadow: -2px 2px 8px 0px #7AA7D026;

	}

	.planeIcon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.planeNum {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #4C91FF;

	}

	.panel {
		padding: 32rpx;
	}

	.notification {
		margin-top: 16rpx;

		::v-deep .u-notice-bar {
			border-radius: 16rpx;
		}

		::v-deep .u-icon text {
			color: #808080 !important;
		}
	}

	.section {
		// height: 100%;
	}

	.map_content {
		position: relative;

		.marker_map {
			height: 100vh;
		}
	}

	.circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		// background-image: url("https://picsum.photos/40/40");
		background-size: 100% 100%;
		margin: 10rpx 20rpx;
	}

	.scan_views {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.left_cicle,
		.right_cicle {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: #fff;
			margin: 0 30rpx;
		}

		.scan_btns {
			color: #fff;
			font-size: 14px;
			width: 240rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			background: linear-gradient(to right, #38d07a, #24b35f);
		}
	}

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

	.position_right_order {
		position: absolute;
		top: 360rpx;
		right: 5%;
		width: 80rpx;
		// height: 400rpx;
		padding: 20rpx 0;
		background: #fff;
		border-radius: 10rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		font-size: 12px;
		justify-content: space-evenly;
		align-items: center;

		>view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 15rpx 0;
		}
	}