Colorful-childhood/pages/details/details.wxss

/* pages/details/details.wxss */
.details {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eaeaea;
    padding-top: 590rpx;
    box-sizing: border-box;
}

.details-scroll {
    width: 100%;
    height: 100%;  
}

.details-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 436rpx;
}

#myVideo {
    width: 100%;
    height: 100%;
}

.menu {
    position: absolute;
    left: 0;
    top: 466rpx;
    display: flex;
}

.menu-item {
    width: 90rpx;
    height: 120rpx;
    margin: 0 46rpx;
}

.menu-item button {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
}

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

.comment {
    padding: 0 16rpx 10rpx 16rpx;
    box-sizing: border-box;
}

.pinglun {
    display: flex;
    align-items: center;
    width: 100%;
    height: 116rpx;
    margin-top: 27rpx;
    border-radius: 20rpx;
    background: #7a7a7a;
    padding: 0 25rpx;
    box-sizing: border-box;
    color: #fff;
    font-size: 40rpx;
    font-weight: 600;
}

.anthology {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5rpx;
    box-sizing: border-box;  
    font-size: 32rpx; 
    color: #888;
    font-weight: bold;
}  

.collection {
    width: 100rpx;
    height: 100rpx;
    background: #fff;
    text-align: center;
    line-height: 100rpx;
    border-radius: 20rpx;
    margin: 27rpx 18rpx 0 0;
}

.current {
    background: #fece00; 
}

.comment-details {
    width: 100%;
    margin-top: 27rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 23rpx 33rpx;
    box-sizing: border-box;  
    font-size: 32rpx; 
    line-height: 44rpx;
} 

.input-box {
    position: relative;
    width: 100%;
    height: 320rpx;
    margin-top: 27rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 34rpx 0 112rpx 34rpx;
    box-sizing: border-box;   
}

.btn {
    position: absolute;
    right: 22rpx;
    bottom: 25rpx;
    display: flex;
}

.btn view {
    width: 153rpx;
    height: 87rpx;
    text-align: center;
    line-height: 87rpx;
    border-radius: 20rpx;
    color: #fff;
    font-size: 32rpx;
}

.no {
    background: #cdcdcd;
    margin-right: 22rpx;
}

.yes {
    background: #fe9d00;
}

.content-speak {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 27rpx;
    border-radius: 20rpx;
    background: #fff;
    padding: 30rpx 34rpx;
    box-sizing: border-box;
}

.information-item {
    display: flex;
}

.information-item image {
    width: 92rpx;
    height: 92rpx;
    border-radius: 50%;
    margin-right: 22rpx;
}

.information-item .name {
    display: flex;
    flex-direction: column;
    color: #424242;
    font-size: 32rpx;
    font-weight:bold;
}

.language {
    font-size: 32rpx;
    margin-top: 10px;
}