/**
 *  Web唐明明
 *  匆匆数载恍如梦，岁月迢迢华发增。
 *  碌碌无为枉半生，一朝惊醒万事空。
 */


 page{
    /* background: #0e0c1a; */
}

.videoSwiper{
    width: 100%;
    height: 80%;
    background: #eee;
}

.videos-content{
    position: relative;
    height: 100vh;
    display: none;
}

/* 视频信息 */
.video-info{
    position: absolute;
    bottom: 50rpx;
    left: 30rpx;
    width: calc(100% - 218rpx);
}

.video-user,
.video-title{
    color: white;
    text-shadow: 0 3rpx 3rpx rgba(0, 0, 0, .3);
}

.video-user{
    font-weight: bold;
    padding-bottom: 10rpx;
    font-size: 38rpx;
}

.video-title{
    font-size: 28rpx;
    line-height: 40rpx;
}

/* 视频工具栏 */
.video-tool{
    position: absolute;
    right: 30rpx;
    bottom: 50rpx;
}

.video-tool-item{
    margin-top: 40rpx;
    text-align: center;
}

.video-tool-item:first-child{
    margin-top: 0;
}

.video-tool-cover{
    width: 98rpx;
    height: 98rpx;
    border-radius: 50%;
    vertical-align: top;
    border:solid 4rpx rgba(255, 255, 255, .2);
    box-sizing: border-box;
}

.video-tool-icon{
    width: 48rpx;
    vertical-align: top;
}

.video-tool-number{
    font-size: 26rpx;
    line-height: 50rpx;
    color: white;
}

/* 黑胶唱片 */
.video-tool-vinyl{
    width: 98rpx;
    height: 98rpx;
    position: relative;
}

.video-tool-vinyl.rotate{
    animation: rotate 10s linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.video-tool-vinyl-cover,
.video-tool-vinyl-back{
    position: absolute;
}

.video-tool-vinyl-back{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-tool-vinyl-cover{
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
    border-radius: 50%;
}