/* ==================
         卡片
 ==================== */

.ui-cards {
    display: block;
    overflow: hidden;
    & .ui-btn.badge {
        top: 0;
        right: 0;
        font-size: 24rpx;
        padding: 0rpx 15rpx;
        height: 40rpx;
    }
    &.no-card > .ui-item {
        margin: 0rpx;
        border-radius: 0rpx;
    }
    & > .ui-item {
        display: block;
        overflow: hidden;
        border-radius: 10rpx;
        margin: 30rpx;
    }
    & > .ui-item.shadow-blur {
        overflow: initial;
    }
    .grid.grid-square {
        margin-bottom: -20rpx;
    }
    &.article {
        display: block;
        & > .ui-item {
            padding: 30rpx;
            background-color: var(--box-bg);
            display: flex;
            align-items: flex-start;
        }
        & > .time {
            padding: 30rpx 0 0 30rpx;
        }
        & > .ui-item .title {
            font-size: 30rpx;
            font-weight: 900;
            color: #333333;
        }
        & > .ui-item .content {
            flex: 1;
        }
        & > .ui-item > image {
            width: 240rpx;
            height: 6.4em;
            margin-left: 20rpx;
            border-radius: 6rpx;
        }
        & > .ui-item .content .desc {
            font-size: 12px;
            color: var(--text-c);
        }
        & > .ui-item .content .text-content {
            font-size: 28rpx;
            color: #888;
        }
    }
    &.case {
        .image {
            position: relative;
            image {
                width: 100%;
                display: block;
            }
            .ui-tag {
                position: absolute;
                right: 0;
                top: 0;
            }
            .ui-bar {
                position: absolute;
                bottom: 0;
                width: 100%;
                background-color: transparent;
                padding: 0rpx 30rpx;
            }
            .bg-black {
                position: absolute;
                bottom: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.6);
            }
        }
        &.no-card .image {
            margin: 30rpx 30rpx 0;
            overflow: hidden;
            border-radius: 10rpx;
        }
    }
    &.dynamic {
        display: block;
        & > .ui-item {
            display: block;
            overflow: hidden;
            & > .text-content {
                padding: 0 30rpx 0;
                font-size: 30rpx;
                margin-bottom: 20rpx;
            }
            & .square-img {
                width: 100%;
                height: 200rpx;
                border-radius: 6rpx;
            }
            & .only-img {
                width: 100%;
                height: 320rpx;
                border-radius: 6rpx;
            }
        }
    }
    &.goods {
        display: block;
        & > .ui-item {
            padding: 30rpx;
            display: flex;
            position: relative;
            background-color: var(--ui-BG);
            & + .ui-item {
                border-top: 1rpx solid #eeeeee;
            }
            .content {
                width: 410rpx;
                padding: 0rpx;
            }
            .title {
                font-size: 30rpx;
                font-weight: 900;
                color: #333333;
                line-height: 1.4;
                height: 1.4em;
                overflow: hidden;
            }
        }
        &.col-goods.col-twice {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 30rpx;
            & > .ui-item {
                width: calc(50% - 30rpx);
                margin: 20rpx 20rpx 0rpx 20rpx;
                .content {
                    padding: 20rpx;
                }
            }
            & > .ui-item:nth-child(2n) {
                margin-left: 0rpx;
            }
        }
        &.col-goods > .ui-item {
            padding: 0rpx;
            display: block;
            border: 0px;
            .content {
                width: 100%;
                padding: 30rpx;
            }
        }
        &.no-card > .ui-item .content {
            width: 470rpx;
            padding: 0rpx;
        }
        &.no-card > .ui-item .title,
        &.col-goods > .ui-item .title {
            height: 3em;
            overflow: hidden;
        }
        & > .ui-item .text-linecut-2 {
            -webkit-line-clamp: 1;
        }
        &.no-card > .ui-item .text-linecut-2,
        &.col-goods > .ui-item .text-linecut-2 {
            -webkit-line-clamp: 2;
            line-height: 1.6em;
            height: 3.2em;
        }
        & > .ui-item > image {
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
            border-radius: 6rpx;
        }
        &.no-card > .ui-item > image {
            width: 220rpx;
            height: 170rpx;
        }
        &.col-goods > .ui-item > image {
            width: 100%;
            height: 340rpx;
            border-bottom-left-radius: 0rpx;
            border-bottom-right-radius: 0rpx;
            display: block;
        }
        &.col-goods.col-twice > .ui-item > image {
            height: 236rpx;
        }
    }
    &.loan {
        display: block;
        & > .ui-item {
            padding: 30rpx 0 30rpx 30rpx;
            display: flex;
            position: relative;
            background-color: var(--box-bg);

            .content {
                width: 450rpx;
                padding: 0rpx;
                .tag-list {
                    width: 450rpx;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 12px;
                    margin-top: 18rpx;
                }
            }
            .action {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
        }
    }
    &.houses {
        display: block;
        & > .ui-item {
            padding: 20rpx;
            display: flex;
            position: relative;
            background-color: var(--box-bg);
            .image {
                width: 230rpx;
                height: 180rpx;
                margin-right: 20rpx;
                border-radius: 6rpx;
            }
            .content {
                width: 400rpx;
                padding: 0rpx;
                .tag-list {
                    width: 400rpx;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 12px;
                    margin-top: 10rpx;
                    .ui-item {
                        height: 20px;
                        line-height: 20px;
                    }
                }
            }
            .action {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
        }
    }

    &.product {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30rpx;
        & > .ui-item {
            width: calc(100% - 15rpx);
            margin: 20rpx 20rpx 0rpx 20rpx;
            background-color: var(--box-bg);
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            // display: flex;
            // flex-wrap: wrap;
            .content {
                padding: 20rpx;
                // width: calc(100% - 345rpx);
                .text-cut {
                    font-size: 16px;
                }
            }
            .image {
                width: 100%;
                height: 240rpx;
                border-radius: 6rpx 0 0 6rpx;
                display: block;
            }
            .ui-progress-tag {
                width: 4em;
                text-align: right;
                font-size: 12px;
            }
            .border-top {
                width: 100%;
            }
            .ui-tag {
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 6rpx 0 6rpx 0;
            }
        }
        // & > .ui-item:nth-child(2n) {
        // 	margin-left: 0rpx;
        // }
    }
    &.shop {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30rpx;
        & > .ui-item {
            width: calc(50% - 30rpx);
            margin: 20rpx 20rpx 0rpx 20rpx;
            background-color: var(--box-bg);
            padding: 20rpx;
            .content {
                margin-top: 15rpx;
            }
            .image {
                width: 100%;
                height: 285rpx;
                border-radius: 6rpx;
                display: block;
            }
        }
        & > .ui-item:nth-child(2n) {
            margin-left: 0rpx;
        }
    }

    &.orders .ui-item {
        margin-top: 30rpx;
        .address-box {
            padding: 15rpx;
            margin: 0 30rpx 30rpx;
            border: 1px solid;
            border-color: var(--main-a);
            border-radius: 10px;
            position: relative;
            .ui-form-group {
                min-height: 10px;
            }
        }
    }
}
