werun-wxapp/components/diy-store/index.less

/* components/diy-store/index.wxss */
.one_index {
    margin: 0 0 100rpx 0;

    .one_info {
        background-size: 100%;
        height: 370rpx;
        display: flex;
        align-items: flex-end;
        padding: 30rpx;

        .one_image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }

        .one_right {
            color: #ffffff;
            width: calc(100% - 180rpx);
            margin: 15rpx 20rpx;

            .one_name {
                font-size: 38rpx;
                font-weight: 700;
                margin-bottom: 10rpx;
                overflow: hidden; //一定要写
                text-overflow: ellipsis; //超出省略号
                display: -webkit-box; //一定要写
                -webkit-line-clamp: 1; //控制行数
                -webkit-box-orient: vertical; //一定要写

            }

            .one_desc {
                font-size: 28rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.two_index {
    margin: 0 0 100rpx 0;

    .two_image {
        width: 100%;
        height: 370rpx;
    }

    .two_info {
        width: 100%;
        display: flex;
        // align-items: center;
        margin: -80rpx 30rpx;

        .two_avatar {
            width: 150rpx;
            height: 150rpx;
            border-radius: 50%;
        }

        .two_right {
            width: calc(100% - 190rpx);
            padding: 0 20rpx;

            .two_name {
                font-size: 38rpx;
                color: #ffffff;
                font-weight: 700;
                overflow: hidden; //一定要写
                text-overflow: ellipsis; //超出省略号
                display: -webkit-box; //一定要写
                -webkit-line-clamp: 1; //控制行数
                -webkit-box-orient: vertical; //一定要写
                margin: 20rpx 0;
            }

            .two_desc {
                color: #999999;
                font-size: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.three_index {
    margin: 0 0 100rpx 0;

    .three_info {
        text-align: center;

        .three_image {
            width: 100%;
            height: 370rpx;
        }

        .three_avatar {
            width: 150rpx;
            height: 150rpx;
            border-radius: 50%;
            margin: -80rpx 0 20rpx;
        }

        .three_name {
            font-size: 38rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
            overflow: hidden; //一定要写
            text-overflow: ellipsis; //超出省略号
            display: -webkit-box; //一定要写
            -webkit-line-clamp: 1; //控制行数
            -webkit-box-orient: vertical; //一定要写

        }

        .three_desc {
            padding: 0 50rpx;
            color: #999999;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.four_index {
    margin: 0 0 100rpx 0;

    .four_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 370rpx;
        background-size: 100%;

        .four_avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }

        .four_name {
            font-size: 38rpx;
            font-weight: 700;
            color: #ffffff;
            margin: 20rpx 0;
            overflow: hidden; //一定要写
            text-overflow: ellipsis; //超出省略号
            display: -webkit-box; //一定要写
            -webkit-line-clamp: 1; //控制行数
            -webkit-box-orient: vertical; //一定要写

        }

        .four_line {
            width: 410rpx;
            height: 2rpx;
            background: #f3ece7;
        }

        .four_desc {
            margin-top: 15rpx;
            color: #999999;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}