light-application/light-application-wx/pages/light-map/light-map.wxss

/* pages/light-map/light-map.wxss */
#map {
    width: 100%;
    height: 100%;
}

.bottom-card {
    width: 100%;
    height: 154rpx;
    position: absolute;
    bottom: 0;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    background-color: #FFFCF5;
    box-sizing: border-box;
    padding: 30rpx 15rpx 22rpx 32rpx;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.left {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.user-photo {
    width: 86rpx;
    height: 86rpx;
    margin-right: 18rpx;
    border-radius: 43rpx;
}

.user-info {
    display: inline-flex;
    flex-direction: column;
}

.username {
    font-size: 30rpx;
}

.user-role {
    color: #999999;
    font-size: 24rpx;
    line-height: 24rpx;
    border: solid 2rpx #C6C6C6;
    box-sizing: border-box;
    padding: 8rpx 12rpx;
    border-radius: 21rpx;
    margin-top: 10rpx;
}

.right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.video-card {
    width: 189rpx;
    height: 95rpx;
    background-size: 100% 100%;
    display: inline-flex;
    justify-content: center;
    line-height: 65rpx;
}

.video {
    width: 34rpx;
    height: 23rpx;
    margin-top: 25rpx;
}

.video-card text {
    font-size: 30rpx;
    color: #FFFFFF;
    margin-left: 7rpx;
}

.message-card {
    width: 189rpx;
    height: 95rpx;
    background-size: 100% 100%;
    display: inline-flex;
    justify-content: center;
    line-height: 65rpx;
}

.message {
    width: 34rpx;
    height: 33rpx;
    margin-top: 20rpx;
}

.message-card text {
    font-size: 28rpx;
    color: #FFFFFF;
    margin-left: 8rpx;
}