honmeigui/components/dt-video/dt-video.wxss

@charset "UTF-8";

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.swiper {
    position: relative;
    width: 100%;
    height: calc(100vh - 294rpx);
    /* border: 1rpx solid red; */
    padding-top: 176rpx;
}

.swiper .swiper-item .info {
    z-index: 1;
    position: absolute;
    bottom: 60rpx;
    color: white;
    text-indent: 1em;
    font-size: 30rpx;
}

page {
    background-color: #000;
}

.swiper .swiper-item .audio {
    position: absolute;
    bottom: 20rpx;
    z-index: 1;
    text-indent: 1em;
    color: white;
    font-size: 30rpx;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* 
			      turn : 定义的动画名称
			      1s : 动画时间
			      linear : 动画以何种运行轨迹完成一个周期
			      infinite :规定动画应该无限次播放
			     */
}

@-webkit-keyframes move {
    0% {
        left: 100vw;
    }

    100% {
        left: -50vw;
    }
}

@keyframes move {
    0% {
        left: 100vw;
    }

    100% {
        left: -50vw;
    }
}

.swiper .swiper-item .audio .text-group {
    position: relative;
    width: 50vw;
    height: 40rpx;
    overflow: hidden;
}

.swiper .swiper-item .audio .text-group .text {
    position: absolute;
    top: 0rpx;
    white-space: nowrap;
    /*文本不会换行，文本会在在同一行上继续*/
    -webkit-animation: 10s move infinite;
    animation: 10s move infinite;
    width: 50vw;
    left: 100vw;
}

.swiper .swiper-item .audio .icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 60rpx;
    -webkit-animation: turn 3s linear infinite;
    animation: turn 3s linear infinite;
    margin-right: 5vw;
    border: 10rpx solid white;
}

@-webkit-keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.zhebu {
    width: 100%;
    height: calc(100vh - 184rpx);
    position: absolute;
    top: 0;
    left: 0;
    /* border: 1rpx solid red; */
    overflow: hidden;
}

.videoPage {
    height: auto;
    width: 100%;

}

.swiper .swiper-item .video {
    width: 100%;
    z-index: 0;
    height: calc(100vh - 296rpx);
    overflow: hidden;
}

.swiper .swiper-item .buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0vw;
    bottom: 12vh;
    color: white;
    text-align: center;
    justify-content: center;
    z-index: 1;
    /* height: 159rpx; */
}

.swiper .swiper-item .buttons .header_group {
    margin-bottom: 50rpx;
    height: 90rpx;
    width: 90rpx;
    position: relative;
}

.swiper .swiper-item .buttons .header_group .header {
    border: 2px solid white;
    margin: 0 auto;
    border-radius: 90rpx;
    height: 90rpx;
    width: 90rpx;
}

.swiper .swiper-item .buttons .header_group .add {
    position: absolute;
    bottom: -30rpx;
    margin: 0 auto;
    right: 0rpx;
    background-color: #f15b6c;
    left: 0rpx;
    width: 50rpx;
    height: 50rpx;
    font-size: 50rpx;
    line-height: 50rpx;
    border-radius: 50rpx;
}

.swiper .swiper-item .buttons .button {
    text-align: center;
    font-size: 25rpx;
    /* height: 100%; */
    height: 165rpx;
    width: 100%;
}

.swiper .swiper-item .buttons .button .icon {
    margin: 20rpx;
    width: 60rpx;
}

.swiper .swiper-item .buttons :after {
    border: none;
}