TIM截图20190124160000.png

css

.screen-box{
    margin: 0 20px;
    background: #fff;
    border: 1px solid #DFDFDF;
    margin-top: 20px;
    height: 50px;
    line-height: 50px;
}
.screen-box .date-box {
    float: left;
    padding-top: 10px;
    margin-right: 10px;
}
.screen-box .date-box .wn-input {
    width: 110px;
    float: left;
    height: 28px;
    text-align: center;
}
.screen-box .search-btn {
    display: block;
    float: left;
    margin: 10px 5px;
    border-radius: 3px;
    line-height: 30px;
    height: 30px;
    background-color: #ff5d49;
    padding: 0 20px;
}
.screen-box .date-box .text {
    float: left;
    height: 30px;
    line-height: 30px;
    width: 30px;
    text-align: center;
}
.pull-left{
    float: left;
}
.pull-right{
    float: right;
}
.tl-h32{
    height: 32px;

}
.tl-p-left-10{
    padding-left: 10px;
}
.tl-btn{
    padding: 5px 15px;
    background-color: #ffe7e3;
    border: 1px solid #ff5d49;
    color: #ff5d49;
    border-radius: 5px;
    margin-left: 10px;
    transition: box-shadow .2s;
}
.tl-btn-red{
    padding: 5px 15px;
    background-color: #ff5d49;
    border: 1px solid #ff5d49;
    color: #fff;
    font-size:12px;
    border-radius: 5px;
    margin-left: 10px;
    transition: box-shadow .2s;
}
.tl-btn-white{
    padding: 5px 15px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #333333;
    font-size:12px;
    border-radius: 5px;
    margin-left: 10px;
    transition: box-shadow .2s;
}
.tl-card{
    width:30%;
    height:100px;
    border-radius:6px;
    float: left;
    margin-right: 17px;
    margin-bottom: 20px;
}
.tl-p10{
    padding: 22px 20px;
}
.tl-img-left{
    width: 56px;
    height: 56px;
    display: inline-block;
    float: left;
}

.tl-color-0{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-1{
    background: linear-gradient(to left, #F6D365 , #F6A085);
}
.tl-color-2{
    background: linear-gradient(to left, #C2E9FB , #A1C4FD);
}
.tl-color-3{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-4{
    background: linear-gradient(to left, #F6D365 , #F6A085);
}
.tl-color-5{
    background: linear-gradient(to left, #C2E9FB , #A1C4FD);
}
.tl-color-6{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-7{
    background: linear-gradient(to left, #F6D365 , #F6A085);
}
.tl-color-8{
    background: linear-gradient(to left, #C2E9FB , #A1C4FD);
}
.tl-color-9{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-10{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-11{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-12{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-13{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-14{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}
.tl-color-15{
    background: linear-gradient(to left, #FAD0C4 , #FF9A9E);
}

.tl-font-16{
    font-size:16px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-font-14{
    font-size:14px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}

html

<div class="expend-table-box" style="margin-top: 0">
        <div class="tl-card tl-color-0" *ngFor="let item of listData">
            <div class="tl-p10">
                <img src="/assets/img/cardPayIcon.png" alt="" class="tl-img-left">
                <div class="tl-title">
                    <div class="tl-font-16 tl-h32">
                        <span class="tl-p-left-10">我是次卡的名称</span>
                        <button class="tl-btn-red pull-right">编辑</button>
                    </div>
                    <div class="tl-font-14 tl-h32">
                        <span class="tl-p-left-10">关联的服务</span>
                        <button class="tl-btn-white pull-right">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tl-card tl-color-1">
            <div class="tl-p10">
                <img src="/assets/img/cardPayIcon.png" alt="" class="tl-img-left">
                <div class="tl-title">
                    <div class="tl-font-16 tl-h32">
                        <span class="tl-p-left-10">我是次卡的名称</span>
                        <button class="tl-btn-red pull-right">编辑</button>
                    </div>
                    <div class="tl-font-14 tl-h32">
                        <span class="tl-p-left-10">关联的服务</span>
                        <button class="tl-btn-white pull-right">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tl-card tl-color-2">
            <div class="tl-p10">
                <img src="/assets/img/cardPayIcon.png" alt="" class="tl-img-left">
                <div class="tl-title">
                    <div class="tl-font-16 tl-h32">
                        <span class="tl-p-left-10">我是次卡的名称</span>
                        <button class="tl-btn-red pull-right">编辑</button>
                    </div>
                    <div class="tl-font-14 tl-h32">
                        <span class="tl-p-left-10">关联的服务</span>
                        <button class="tl-btn-white pull-right">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tl-card tl-color-0">
            <div class="tl-p10">
                <img src="/assets/img/cardPayIcon.png" alt="" class="tl-img-left">
                <div class="tl-title">
                    <div class="tl-font-16 tl-h32">
                        <span class="tl-p-left-10">我是次卡的名称</span>
                        <button class="tl-btn-red pull-right">编辑</button>
                    </div>
                    <div class="tl-font-14 tl-h32">
                        <span class="tl-p-left-10">关联的服务</span>
                        <button class="tl-btn-white pull-right">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tl-card tl-color-0">
            <div class="tl-p10">
                <img src="/assets/img/cardPayIcon.png" alt="" class="tl-img-left">
                <div class="tl-title">
                    <div class="tl-font-16 tl-h32">
                        <span class="tl-p-left-10">我是次卡的名称</span>
                        <button class="tl-btn-red pull-right">编辑</button>
                    </div>
                    <div class="tl-font-14 tl-h32">
                        <span class="tl-p-left-10">关联的服务</span>
                        <button class="tl-btn-white pull-right">删除</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>