xz_gangba/pages/newsDetail/newsDetail.wxss
2023-03-15 17:58:44 +08:00

201 lines
3.0 KiB
Plaintext

/* page{
background: #d2e0f6;
} */
.news-title {
padding: 20rpx 30rpx;
font-size: 34rpx;
font-weight: bold;
color: #242424;
text-align: center;
}
.news-attr-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.news-attr {
font-size: 24rpx;
color: #949494;
}
.news-attr:nth-of-type(n+2) {
margin-left: 20rpx;
}
.news-content {
padding: 20rpx 20rpx;
font-size: 34rpx;
color: #242424;
}
.img-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: black;
}
.swiper-item {
width: 100%;
height: 100%;
position: absolute;
transform: translate(0%, 0px) translateZ(0px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item-txt {
position: absolute;
color: white;
font-size: 24rpx;
bottom: 0rpx;
}
.video-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #242424;
}
.video-box video {
width: 100%;
}
.video-category {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding-bottom: 30rpx;
margin: 20rpx;
flex-wrap: wrap;
}
.category-title {
font-size: 34rpx;
color: white;
align-self: center;
margin-top: 20rpx;
}
.category-item {
font-size: 30rpx;
color: white;
border: 1rpx solid #949494;
padding: 20rpx;
margin: 5rpx;
}
.category-item-sel {
border: 1rpx solid #f30000;
color: #f30000;
background: #97979741;
}
.desc-box {
color: #f30000;
margin-top: 40rpx;
padding-left: 20rpx;
}
.desc {
font-size: 28rpx;
color: #242424;
padding: 30rpx 40rpx;
}
.audio-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background: black;
color: white;
}
.audio-img {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 400rpx;
}
.img-bg {
width: 100%;
height: 400rpx;
}
.img-loading {
width: 200rpx;
height: 200rpx;
position: absolute;
top: calc(50%-50rpx);
left: calc(50%-50rpx);
}
.progress {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.slider {
margin: 10rpx;
width: 50%;
}
.option {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
width: 70%;
align-self: center;
margin-top: 20rpx;
}
.btn-mode,
.btn-music {
width: 70rpx;
height: 70rpx;
}
.btn-prev,
.btn-next {
width: 70rpx;
height: 70rpx;
}
.btn-pause {
width: 140rpx;
height: 140rpx;
}
.current {
font-size: 28rpx;
margin-right: 30rpx;
}
.duration {
font-size: 28rpx;
margin-left: 30rpx;
}
.btn {
width: 64rpx;
height: 64rpx;
}