werun-wxapp/components/diy-content/content.less

/* components/diy-content/content.wxss */
.one_index {
    .one_info {
        margin: 20rpx auto;
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 12rpx 4rpx;

        .one_image {
            width: 100%;
        }

        .one_name {
            margin: 15rpx;
            font-weight: 700;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .tags {
            display: flex;
            font-size: 28rpx;
            margin: 15rpx;

            .tag {
                margin-right: 10rpx;
            }
        }

        .one_down {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            color: #999999;
            margin: 0 20rpx;
            padding-bottom: 10rpx;

            .reading {
                display: flex;

                .read {}

                .autor {
                    margin-left: 10rpx;

                }
            }

            .praise {}
        }
    }
}

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

    .two_info {
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 12rpx 4rpx;

        .two_image {
            width: 100%;
            background-size: 100%;
        }

        .two_name {
            margin: 10rpx;
            font-weight: 700;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .tags {
            display: flex;
            font-size: 22rpx;
            margin: 15rpx;

            .tag {
                margin-right: 10rpx;
            }
        }

        .two_down {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            color: #999999;
            margin: 0 15rpx;
            padding-bottom: 15rpx;

            .reading {
                display: flex;

                .autor {
                    margin-left: 10rpx;
                }
            }

            .praise {}
        }
    }
}

.three_index {
    display: flex;

    .three_info {
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 12rpx 4rpx;
        flex: none;

        .three_image {
            width: 100%;
            background-size: 100%;
        }

        .three_name {
            margin: 10rpx;
            font-weight: 700;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .tags {
            display: flex;
            font-size: 22rpx;
            margin: 15rpx;

            .tag {
                margin-right: 10rpx;
            }
        }

        .three_down {
            display: flex;
            justify-content: space-between;
            font-size: 24rpx;
            color: #999999;
            margin: 0 15rpx;
            padding-bottom: 10rpx;

            .reading {
                display: flex;

                .autor {
                    margin-left: 10rpx;
                }
            }

            .praise {}
        }
    }
}

// .four_index {
//     box-shadow: rgb(126 126 126 / 50%) 0px 0px 12rpx 4rpx;

//     .four_info {
//         background-size: 100%;
//         color: #ffffff;
//         display: flex;
//         flex-direction: column;
//         justify-content: flex-end;

//         .four_name {
//             font-size: 36rpx;
//             overflow: hidden;
//             display: -webkit-box;
//             -webkit-line-clamp: 2;
//             -webkit-box-orient: vertical;
//             margin: 0 15rpx;
//         }

//         .tags {
//             display: flex;
//             font-size: 24rpx;
//             margin: 15rpx;

//             .tag {
//                 margin-right: 10rpx;
//             }

//             .reading {
//                 margin: 0 30rpx;
//             }

//             .praise {}
//         }
//     }

//     .down_info {
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         margin: 20rpx 15rpx;
//         border-bottom: 1rpx solid #e3e3e3;
//         padding-bottom: 10rpx;

//         .left_info {
//             width: 489rpx;

//             .name {
//                 font-size: 34rpx;
//                 overflow: hidden;
//                 display: -webkit-box;
//                 -webkit-line-clamp: 2;
//                 -webkit-box-orient: vertical;
//             }

//             .tags {
//                 display: flex;
//                 font-size: 24rpx;
//                 margin: 15rpx;

//                 .tag {
//                     margin-right: 10rpx;
//                 }
//             }

//             .four_down {
//                 display: flex;
//                 justify-content: space-between;
//                 font-size: 24rpx;
//                 color: #999999;
//                 margin: 0 20rpx;
//                 padding-bottom: 20rpx;

//                 .reading {}

//                 .praise {}

//             }
//         }

//         .four_image {}
//     }
// }

.five_index {
    .five_info {
        display: flex;
        justify-content: space-between;
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 12rpx 4rpx;
        height: 230rpx;

        .left_info {
            width: 60%;

            .name {
                min-height: 96rpx;
                font-weight: 700;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin: 20rpx 15rpx;
            }

            .tags {
                display: flex;
                font-size: 22rpx;
                margin: 15rpx;

                .tag {
                    margin-right: 10rpx;
                }
            }

            .five_down {
                display: flex;

                justify-content: space-between;
                font-size: 24rpx;
                color: #999999;
                margin: 0 15rpx;

                .reading {
                    display: flex;
                    align-items: center;

                    .autor {
                        margin-left: 20rpx;
                    }
                }

                .praise {}
            }
        }

        .five_image {
            width: 39%;
            height: 100%;
        }
    }
}