reader/components/authority/index.less

.authority {
    height: 100%;
    padding: 0rpx 25rpx;

    .module {
        margin-bottom: 30rpx;

        .topic {
            font-size: 36rpx;
        }

        .explain {
            margin: 10rpx 0rpx;
            font-size: 28rpx;
        }

        .works {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .work {
                margin: 20rpx 0rpx;

                .content {
                    position: relative;
                    font-size: 0px;
                    border-radius: 30rpx;
                    overflow: hidden;

                    .cover {
                        width: 344rpx;
                        height: 194rpx;
                    }

                    .audioBox {
                        position: relative;

                        .audioPlay {
                            position: absolute;
                            left: 0px;
                            top: 0px;
                            bottom: 0px;
                            right: 0px;
                            margin: auto;
                            width: 220rpx;
                            height: 174rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .audioPlayBg {
                                width: 150rpx;
                                height: 150rpx;
                            }

                            .audioPlayZhen {
                                position: absolute;
                                right: 30rpx;
                                top: 16rpx;
                                width: 32rpx;
                                height: 40rpx;
                            }

                            .cover {
                                position: absolute;
                                width: 130rpx;
                                height: 130rpx;
                                border-radius: 50%;
                            }
                        }
                    }

                    .mask {
                        position: absolute;
                        width: 100%;
                        height: 40rpx;
                        bottom: 0px;
                        background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent);
                        display: flex;
                        align-items: center;

                        .fb {
                            margin: 6rpx 10rpx;
                            width: 26rpx;
                            height: 26rpx;
                        }

                        .fb-num {
                            font-size: 24rpx;
                            color: white;
                        }
                    }
                }

                .title {
                    width: 344rpx;
                    margin-top: 6rpx;
                    font-size: 30rpx;
                }
            }

        }
    }
}