@color_1: #999999; @color_2: #333; @color_3: #fff; @color_4: #ff2525; @background_color_1: #ffffff; @background_color_2: #333; page { background: #f5f5f5; height: 100%; } .address-container { display: flex; flex-direction: column; align-items: stretch; padding-bottom: calc(env(safe-area-inset-bottom) + 172rpx); .address-list { font-size: 24rpx; background-color: @background_color_1; -webkit-overflow-scrolling: touch; } .bottom-fixed { border-top: 1rpx solid #e5e5e5; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: #fff; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 12rpx 32rpx calc(env(safe-area-inset-bottom) + 12rpx) 32rpx; .footer { margin-top: 10rpx; display: inline-block; width: 100%; text-align: center; font-size: 24rpx; font-weight: 400; color: @color_4; line-height: 60rpx; height: 60rpx; } } .btn-wrap { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 32rpx; font-weight: bold; .location-btn { width: 332rpx; height: 88rpx; display: flex; justify-content: center; align-items: center; background-color: @background_color_1; color: @color_2; position: relative; &::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; box-sizing: border-box; border-radius: 88rpx; border: #dddddd 2rpx solid; } } .address-btn { width: 300rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; background-color: @background_color_2; border-radius: 8rpx; color: @color_3; } .btn-default { background: #c6c6c6; } } .message { margin-top: 48rpx; } .custom-class { margin-right: 12rpx; font-weight: normal; } } .address-list { .no-address { width: 750rpx; padding-top: 30vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .no-address__icon { width: 224rpx; height: 224rpx; } .no-address__text { font-size: 28rpx; line-height: 40rpx; color: @color_1; margin-top: 24rpx; } }