/* pages/deviceLocal/deviceLocal.wxss */ /* 底部tab栏开始 */ .bottom-view { position: fixed; z-index: 100; /* width: 100vw; */ bottom: 0; left: 0; height: 118rpx; display: flex; flex-direction: row; background: rgba(255, 255, 255, 1); box-shadow: 0px -5rpx 12rpx 0rpx rgba(173, 187, 217, 0.24); } .bottom-center { width: 88rpx; height: 88rpx; background: rgba(255, 255, 255, 1); box-shadow: 0px -5rpx 12rpx 0rpx rgba(173, 187, 217, 0.24); border-radius: 50%; /* margin: 0 auto; */ margin-top: -18rpx; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 101; bottom: 30rpx; left: 50%; transform: translate(270%,0%); } .bottom-centent { /* width: 100vw; */ /* position: absolute; */ /* top: 0; left: 0; */ display: flex; flex-direction: row; align-items: center; justify-content: space-around; } .bottom-img { width: 50rpx; height: 50rpx; } .bottom-item { text-align: center; display: flex; align-items: center; } .bottom-text { font-size: 18rpx; font-family: PingFang SC; font-weight: 400; color: rgba(135, 135, 135, 1); line-height: 34rpx; } .play-img { width: 92rpx; height: 92rpx; /* position: absolute; */ position: fixed; bottom: 330rpx; left: 20rpx; } .stop-img { width: 92rpx; height: 92rpx; /* position: absolute; */ position: fixed; bottom: 430rpx; left: 20rpx; } .close-img { width: 92rpx; height: 92rpx; /* position: absolute; */ position: fixed; bottom: 330rpx; left: 120rpx; } .tip-top { /* position: absolute; */ position: fixed; top: 0; right: 0; width: 26rpx; height: 26rpx; background: rgba(255, 39, 39, 1); border-radius: 50%; text-align: center; font-size: 18rpx; font-family: DIN; font-weight: bold; color: rgba(255, 255, 255, 1); line-height: 26rpx; } .gps_last { width: 78rpx; height: 78rpx; border-radius: 10rpx; bottom: 220rpx; /* position: absolute; */ position: fixed; right: 28rpx; background-color: #ffffff; box-shadow: 3rpx 3rpx 3rpx 3rpx #cccccc; } .text_view { font-size: 24rpx; text-align: center; height: 39rpx; line-height: 39rpx; } .fence-img { width: 92rpx; height: 92rpx; /* position: absolute; */ position: fixed; bottom: 120rpx; right: 20rpx; } .trace-box { width: 300rpx; height: 90rpx; /* position: absolute; */ position: fixed; bottom: 190rpx; /* left: calc(50% - 150rpx); */ background: rgba(255, 255, 255, 1); border-radius: 20rpx; box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(173, 187, 217, 0.24); line-height: 90rpx; text-align: center; font-weight: bold; font-size: 28rpx; } /* 底部tab栏结束 */ /* 页面上方弹窗开始 */ .battery-group { position: fixed; z-index: 100; top: 30rpx; /* width: 100%; */ left: 50%; transform: translate(-9%,0%); } .battery-item { background-color: #fff; border-radius: 8rpx; box-shadow: 0px 6rpx 10rpx 0px rgba(192, 192, 192, 0.16); position: relative; width: 671rpx; /* margin: 0 auto; */ } .map-top { padding: 0 23rpx; height: 60rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20rpx; position: relative; } .map-cross { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .map-top-box { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .gsm-view { margin-left: 20rpx; } .map-top-text { font-size: 26rpx; font-family: DIN; font-weight: bold; color: rgba(0, 0, 0, 1); margin-right: 15rpx; } .map-top-i { width: 6rpx; height: 20rpx; background: rgba(17, 191, 150, 1); border-radius: 3rpx; margin-right: 5rpx; } .map-top-n { width: 6rpx; height: 20rpx; background: rgba(186, 222, 214, 1); border-radius: 3rpx; margin-right: 5rpx; } .map-top-box-1 { display: flex; flex-direction: row; } .map-top-text-1 { font-size: 24rpx; color: rgba(0, 0, 0, 1); margin-right: 15rpx; height: 19rpx; line-height: 19rpx; text-align: center; margin-top: 16rpx; } .battery_num_view { height: 19rpx; width: 0rpx; background-color: #08c58b; position: absolute; /* top: 50rpx; */ } .battery_num_view_red { height: 19rpx; width: 0rpx; background-color: #ff2727; position: absolute; } .batter-info-group { padding: 5rpx 28rpx; } .battery-desc { font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: rgba(0, 0, 0, 1); margin: 0 10rpx; margin-bottom: 22rpx; } /* 页面上方弹窗结束 */ /* 轨迹弹窗开始 */ .popup-black { position: fixed; bottom: 0; left: 0; z-index: 101; background-color: rgba(0, 0, 0, 0.4); } .popup-view { margin-top: 500rpx; margin-left: 40rpx; width: 671rpx; border-radius: 30rpx; overflow: hidden; z-index: 2; background-color: #ffffff; border-radius: 8rpx; padding-top: 30rpx; } .popup-top { display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 4rpx solid #f7f7f7; margin-bottom: 20rpx; } .location_mark { font-size: 28rpx; } .sel_location_view { border: 1rpx solid #08c58b; padding-left: 16rpx; padding-right: 16rpx; padding-top: 4rpx; padding-bottom: 4rpx; margin-left: 10rpx; margin-right: 10rpx; border-radius: 8rpx; font-size: 26rpx; } .un_location_view { border: 1rpx solid rgba(179, 179, 179, 1); padding-left: 16rpx; padding-right: 16rpx; padding-top: 4rpx; padding-bottom: 4rpx; margin-left: 10rpx; margin-right: 10rpx; border-radius: 8rpx; font-size: 26rpx; } .time-img { margin-right: 20rpx; width: 30rpx; height: 30rpx; } .day-btn { justify-content: space-around; } .bottom-btn { justify-content: space-around; margin-top: 30rpx; } .btn { width: 336rpx; padding-top: 30rpx; padding-bottom: 30rpx; border-top: 6rpx solid #f7f7f7; text-align: center; } .first-btn { border-right: 3rpx solid #f7f7f7; text-align: center; } .second-btn { border-left: 3rpx solid #f7f7f7; text-align: center; } /* 轨迹弹窗结束 */ /* 报警弹窗开始 */ .alarm-view, .fence-view, .stop-view, .time-view { position: fixed; bottom: 0; height: 700rpx; border-radius: 50rpx 50rpx 0 0; overflow: hidden; z-index: 2; background-color: #ffffff; padding-top: 40rpx; padding-bottom: 30rpx; white-space: nowrap; /* 保持项目在同一行 */ /* overflow-y: auto; */ } .alarm-top, .fence-top, .stop-top { justify-content: space-between; align-items: flex-end; padding-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx; } .alarm-content, .fence-content, .fence-config, .stop-content { border-top: 4rpx solid #f7f7f7; padding: 30rpx; } .danger-view { color: #ffffff; font-size: 24rpx; padding: 6rpx 10rpx; background-color: #ee0a24; border-radius: 5rpx; margin-right: 10rpx; } .primary-view { color: #ffffff; font-size: 24rpx; padding: 6rpx 10rpx; background-color: #1989fa; border-radius: 5rpx; } .alarm-right, .stop-right { width: 350rpx; } /* 报警弹窗结束 */ .custom-button { height: 40rpx; font-size: 26rpx; font-family: DIN; font-weight: bold; line-height: 40rpx; color: rgba(255, 255, 255, 1); background: #08c58b; border-radius: 20rpx; padding: 0 20rpx; box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(173, 187, 217, 0.24); } .save-btn { width: 100%; font-size: 32rpx; font-family: PingFang SC; font-weight: 500; color: rgba(255, 255, 255, 1); text-align: center; /* margin: 0 auto; */ background: rgba(17, 191, 150, 1); border-radius: 45rpx; } /* 左下角定位开始 */ .left-group { left: 17rpx; } .left-group, .right-group { position: fixed; bottom: 80px; } .btn-ctr { margin-top: 22rpx; width: 89rpx; height: 89rpx; } /* 左下角定位结束 */ /* 页面下方时间范围开始 */ .track_bottom { position: fixed; bottom: 140rpx; height: 180rpx; width: 750rpx; background-color: white; } .track_total_time { font-size: 26rpx; padding-left: 20rpx; padding-right: 10rpx; padding-top: 30rpx; color: rgba(135, 135, 135, 1); } .track_slide { height: 120rpx; width: 750rpx; padding-left: 20rpx; } .fastForward { margin-left: 20rpx; margin-right: 20rpx; flex-direction: row; align-items: center; } .fastForward_img { width: 64rpx; height: 64rpx; vertical-align: middle; } /* 页面下方时间范围结束 */ .fence-btn { padding: 10rpx 20rpx; background-color: #1989fa; border-radius: 5rpx; } .van-cell-text { font-size: 28rpx; } .fence-content { justify-content: space-between; } .fence-right { display: flex; align-items: flex-end; } .o-text { background-color: #ff976a; color: #ffffff; border-radius: 5rpx; padding: 5rpx 10rpx; font-size: 24rpx; margin-left: 20rpx; } .fastForward_text { /* height: 120rpx; line-height: 120rpx; */ height: 120rpx; line-height: 120rpx; text-align: center; padding: 20rpx; font-size: 26rpx; }