zhishifufei_php/public/wap/first/zsff/components/recommend/material/index.css

.recommend-material {
    margin-top: .14rem;
    background-color: #fff;
    overflow: hidden;
}

.recommend-material > div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: .2rem;
}

.recommend-material > div > div {
    font-weight: bold;
    font-size: .32rem;
    color: #333;
}

.recommend-material > div > a {
    font-size: .22rem;
    color: #999;
}

.recommend-material .iconfont {
    margin-left: .09rem;
    font-size: .18rem;
}

.recommend-material ul {
    padding-right: .2rem;
    padding-left: .2rem;
}

.recommend-material li {
    margin-bottom: .4rem;
}

.recommend-material li a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: .22rem;
    color: #999;
}

.recommend-material img {
    display: block;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.recommend-material a > div:last-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    min-width: 0;
    margin-left: .24rem;
}

.recommend-material a > div > div:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .28rem;
    color: #333;
}

.recommend-material a > div > div:nth-child(2) {
    font-weight: bold;
    font-size: .28rem;
    color: #ff6b00;
}

.recommend-material a > div > div.money {
    font-size: .22rem;
}

.recommend-material .money span {
    font-size: .32rem;
}

.recommend-material a > div > div:last-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.recommend-material button {
    padding: .03rem .2rem;
    border-radius: .19rem;
    background-color: #2c8eff;
    font-family: inherit;
    font-weight: normal;
    font-size: .22rem;
    color: #fff;
}

.recommend-material .column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.recommend-material .column li {
    width: 3.45rem;
}

.recommend-material .column a {
    display: inline;
}

.recommend-material .column img {
    width: 3.45rem;
    height: 1.92rem;
}

.recommend-material .column a > div:last-child {
    height: 1.34rem;
    margin-top: .14rem;
    margin-left: 0;
}