181 lines
2.8 KiB
Plaintext
181 lines
2.8 KiB
Plaintext
|
|
/**
|
|
* Web唐明明
|
|
* 匆匆数载恍如梦，岁月迢迢华发增。
|
|
* 碌碌无为枉半生，一朝惊醒万事空。
|
|
*/
|
|
|
|
|
|
page{
|
|
background: #0e0c1a;
|
|
}
|
|
|
|
.videoSwiper{
|
|
width: 100%;
|
|
height: 80%;
|
|
background: #eee;
|
|
}
|
|
|
|
.videos-content{
|
|
position: relative;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
padding-bottom: calc(48px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* 直播信息 */
|
|
.live-rooms{
|
|
position: absolute;
|
|
top: calc(180rpx + env(safe-area-inset-bottom));
|
|
left: 30rpx;
|
|
}
|
|
|
|
.live-rooms-cover{
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
border-radius: 50%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.live-rooms-nav{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.live-rooms-nav:first-child{
|
|
margin-left: 0;
|
|
}
|
|
|
|
.live-rooms-nav::before,
|
|
.live-rooms-nav::after{
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
|
|
.live-rooms-nav::before{
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
border:solid 4rpx #FF8C37;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.live-rooms-nav::after{
|
|
content: "直播中";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10rpx;
|
|
width: 78rpx;
|
|
background: #FF8C37;
|
|
color: white;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
/* 视频信息 */
|
|
.video-info{
|
|
position: absolute;
|
|
bottom: calc(78px + env(safe-area-inset-bottom));
|
|
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: calc(78px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.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%;
|
|
}
|