/* pages/limit/queue.wxss */

page {
    background-color: #222;
}

.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0;
}

scroll-view {
    height: 1206rpx;
}

.queue-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 352rpx;
    background-size: 100% 100%;
}

image {
    width: 100%;
    height: 100%;
}

.queue-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
}

.queue-desc-link {
    color: #fff;
    font-size: 24rpx;
    margin-left: 30rpx;
}

.queue-prize-link {
    height: 44rpx;
    margin-right: 30rpx;
    color: #fff;
    font-size: 24rpx;
    background-color: #a0a0a0;
    border-radius: 30rpx;
    line-height: 44rpx;
}

.queue-prize-link.active {
    background-color: #c30016;
}

.user-container,
.button-container {
    display: flex;
    position: fixed;
    height: 100rpx;
    bottom: 42rpx;
    right: 32rpx;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 19;
}

/* 用户头像及排名 */
.userrank {
    position: relative;
    color: #fff;
    margin-right: 10rpx;
    border-radius: 14rpx 20rpx 0 14rpx;
    background-color: #000;
}

.user-container.success .userrank {
    background-color: #fed832;
}

.user-container.fail .userrank {
    background-color: #b0b0b0;
}

.user-container.success image,
.user-container.fail image {
    border: none;
}

/* 头像旁边的特殊形状，使用:after :before实现 */
.userrank .rank-text {
    display: flex;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 2px 6px;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 6px 6px 0rpx 6px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 28rpx;
    line-height: 1.2;
    z-index: -1;
}

/* 先做一个圆角矩形，显示左边与下方边框，则左下角为圆角，并设置与父级的右边框对齐 */
.rank-text:after {
    content: '';
    width: 8px;
    height: 50%;
    border: none;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 0 0 0 20rpx;
    position: absolute;
    bottom: 0rpx;
    right: -5.8px;
    box-sizing: border-box;
}

/* 在下面画一个矩形，显示下边框，背景从黑色渐变到透明 */
.rank-text:before {
    content: '';
    width: 10px;
    height: 6px;
    border: none;
    border-bottom: 2px solid #fff;
    border-radius: 2px;
    position: absolute;
    bottom: 0rpx;
    right: -5px;
    background: linear-gradient(45deg, #000 40%, transparent 60%);
    box-sizing: border-box;
}

.user-container.success .rank-text:before {
    background: linear-gradient(45deg, #fed832 40%, transparent 60%);
}

.user-container.fail .rank-text:before {
    background: linear-gradient(45deg, #b0b0b0 40%, transparent 60%);
}

.userhead {
    width: 108rpx;
    height: 108rpx;
}

.userhead image {
    border: 4rpx solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
}

.join-button {
    display: flex;
    width: 108rpx;
    height: 108rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #000;
    align-items: center;
    justify-content: center;
}

.end-button {
    display: flex;
    width: 108rpx;
    height: 108rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #a0a0a0;
    align-items: center;
    justify-content: center;
}

.join-button text,
.end-button text {
    display: flex;
    width: 60rpx;
    height: 72rpx;
    text-align: center;
    align-items: center;
    color: #fff;
    font-size: 28rpx;
    line-height: 1.2;
}

.queue-list { /* 排队列表 */
    display: flex;
    width: 100%;
    flex-direction: column;
}

.queue-item { /* 列表中的item */
    display: flex;
    position: relative;
    width: 100%;
    height: 162rpx;
    align-items: center;
    color: white;
    background-color: #444;
    box-sizing: border-box;
    overflow: hidden;
}

.queue-item.active { /* 用户自身白底渐变 */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.1));
    color: #000;
}

.queue-item:after { /* item下方细线 */
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1rpx solid rgba(34, 34, 34, 0.5);
    transform: scaleX(0.6) scaleY(0.3);
    transform-origin: 0% 100%;
    z-index: 0;
}

.queue-item .item-head-container { /* item头像 */
    display: flex;
    position: relative;
    width: 150rpx;
    height: 150rpx;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.item-head-container .item-head {/* item头像图 */
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
}

.item-head-container .gift-icon {
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    right: 24rpx;
    bottom: 34rpx;
    z-index: 5;
}

.item-helpinfo-container {
    width: 410rpx;
}

.item-info-container { /* item用户相关信息 */
    display: flex;
    flex-flow: column;
    width: 260rpx;
    height: 150rpx;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}

.item-helpinfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60rpx;
    margin: 0 30rpx;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 20rpx;
    font-weight: lighter;
    color: #fff;
    border-radius: 30rpx;
    overflow: hidden;
}

.item-helpinfo image {
    width: 42rpx;
    height: 42rpx;
    margin: 0 8rpx;
    border-radius: 42rpx;
}

.item-user-rank { /* item 用户排名 */
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 36rpx;
    font-weight: bold;
    line-height: 40rpx;
    overflow: hidden;
}

.item-user-assist {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 146rpx;
    height: 36rpx;
    background-color: #d0021b;
    border-radius: 20rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
    font-weight: lighter;
    line-height: 36rpx;
    color: #fff;
}

.item-user-assist image {
    width: 28rpx;
    height: 28rpx;
    margin: 0 4rpx 0 6rpx;
    border-radius: 28rpx;
}

.item-user-name { /* item 用户名称 */
    width: 100%;
    font-size: 24rpx;
    line-height: 36rpx;
    overflow: hidden;
    white-space: nowrap;
}

.item-user-time { /* item 用户排队时间 */
    display: flex;
    justify-content: center;
    height: 32rpx;
    line-height: 32rpx;
    align-items: center;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.7);
}

.item-user-vip-level { /* vip等级 */
    width: 52rpx;
    height: 32rpx;
}

.item-user-time-icon { /* 时间小图标 */
    width: 16rpx;
    height: 16rpx;
    background-image: url('http://imgboys1.yohobuy.com/staticimg/2018/03/05/10/019d6b2073bc15c96a5ae74b8b73f0d2fc.png');
    background-size: 100% 100%;
    margin-right: 8rpx;
}

.queue-item.active .item-user-time-icon { /* 用户自身白底时的时间小图标 */
    background-image: url('http://imgboys1.yohobuy.com/staticimg/2018/03/05/10/01c72176785481a14216a7eda3786aee01.png');
}

.item-user-time-text { /* 时间文字 */
    margin-right: 8rpx;
}

.queue-item.active .item-user-time { /* 用户自身白底时的时间文字 */
    color: rgba(0, 0, 0, 0.7);
}

.item-bg { /* 右边的排队图片 */
    width: 340rpx;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
}

.item-bg image {
    width: 100%;
    height: 100%;
}

.invite-button {
    position: fixed;
    width: 280rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: white;
    text-align: center;
    font-size: 26rpx;
    left: 66rpx;
    bottom: 30rpx;
    border-radius: 30rpx;
    background-color: rgba(208, 2, 27, 0.5);
}