/* components/map-sense.wxss */ .content { width: 100%; height: 80%; background: #FFFFFF; box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.65); border-radius: 0 0 10rpx; overflow: auto; position: relative; box-sizing: border-box; padding: 24rpx 22rpx; } .content .top { width: 100%; height: 342rpx; position: relative; } .content .top .top-bottom .top-bottom-img, .content .top .right-bottom .right-bottom-img, .content .top .center-bottom .center-bottom-img, .content .center .center-img { width: 100%; height: 100%; } .content .top .top-bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .content .top .right-bottom { width: 44%; height: 43%; position: absolute; right: 1%; bottom: 2%; } .content .top .center-bottom { width: 35%; height: 52%; position: absolute; text-align: center; bottom: 2%; left: 22%; } .content .top .center-bottom .small-sound { width: 44rpx; height: 44rpx; background: #B4DCF0; border-radius: 50%; position: absolute; top: 30%; left: 38%; } .content .top .center-bottom .small-sound .sound-img { width: 22rpx; height: 20rpx; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%); } .content .top .light-sound { width: 60rpx; height: 60rpx; display: inline-block; background: radial-gradient(circle, #1C2E4C 0%, #38A2D7 68%, #FFFFFF 100%); box-shadow: 0px 2rpx 22rpx rgba(255, 255, 255, 0.8); border-radius: 50%; opacity: 1; position: absolute; top: 20%; right: 35%; text-align: center; } .content .top .light-sound .sound-img { width: 28rpx; height: 26rpx; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; } .content .top .top-bottom .light-sound { width: 60rpx; height: 60rpx; display: inline-block; background: radial-gradient(circle, #1C2E4C 0%, #38A2D7 68%, #FFFFFF 100%); box-shadow: 0px 2rpx 22rpx rgba(255, 255, 255, 0.8); border-radius: 50%; opacity: 1; position: absolute; top: 17%; right: 56%; text-align: center; } .content .top .center-bottom .txt { display: inline; width: 48rpx; height: 32rpx; font-size: 24rpx; font-weight: 400; line-height: 200rpx; color: #2F2414; opacity: 0.8; position: absolute; top: 20%; right: 40%; } .content .center { width: 190rpx; height: 190rpx; margin: 10% auto; } .content .center .promptText { text-align: center; font-size: 36rpx; font-weight: 300; color: rgba(47, 36, 20, 0.8); } .content .text { width: 460rpx; height: 60rpx; font-size: 20rpx; font-weight: 400; line-height: 32rpx; color: #2F2414; opacity: 0.45; text-align: center; margin: 12% auto; } .content .bottom { width: 378rpx; height: 76rpx; background: #FFFFFF; border: 2rpx solid #38A2D7; border-radius: 36rpx; text-align: center; display: inline; padding: 2% 10%; margin: 0 1%; } .content .bottom .txt { display: inline; width: 152rpx; height: 76rpx; font-size: 38rpx; font-weight: 300; line-height: 76rpx; color: #38A2D7; } .content .top .small-sound { width: 44rpx; height: 44rpx; background: #B4DCF0; border-radius: 50%; position: absolute; top: 19%; left: 36%; } .content .top .small-sound .sound-img { width: 22rpx; height: 20rpx; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .content .top .right-bottom .small-sound { width: 44rpx; height: 44rpx; background: #B4DCF0; border-radius: 50%; position: absolute; top: 60rpx; left: 100rpx; } .content .top .right-bottom .small-sound .sound-img { width: 22rpx; height: 20rpx; display: inline-block; top: 50%; left: 50%; transform: translate(-50%,-50%); }