.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: 30rpx; // transform: translateX(-50%); z-index: 999; background: #fff; width: 70%; 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; } } .position_left_order { height: 100rpx; position: absolute; right: 30rpx; top: 180rpx; // transform: translateX(-50%); display: flex; align-items: center; font-size: 12px; background: #fff; padding: 15rpx; border-radius: 15rpx; z-index: 99; }