<template>
    <div class="goods">
        <img src="../assetsPre/levelA.png" alt="" class="level">
        <div class="goodsImg" style="background-image:url(https://bpic.588ku.com/back_pic/05/56/93/515b212d11992dd.jpg)"></div>
        <div class="title">
            <div class="name">美瑞莉娜工作室</div>
            <div class="address">合肥</div>
        </div>
        <div class="subtitle">
            <span>响应时间 :</span>
            <span>15分钟</span>
        </div>
        <div class="subtitle">
            <span>返片率 :</span>
            <span>2%</span>
        </div>
    </div>
</template>

<script>

export default {
    name: 'goodsLittle',
    data() {
        return {

        }
    },
    computed: {

    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.goods {
    overflow: hidden;
    padding: 32px 30px 0;
    position: relative;
    display: inline-block;
    .level {
        width: 39px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 4px;
    }
    .goodsImg {
        width: 176px;
        height: 100px;
        border-radius: 8px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .title {
        overflow: hidden;
        width: 176px;
        margin: 9px 0 0;
        .name {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 19px;
            float: left;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .address {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(11, 158, 192, 1);
            line-height: 19px;
            float: right;
        }
    }

    .subtitle {
        margin-top: 8px;
        span {
            font-size: 12px;
            font-family: MicrosoftYaHei;

            line-height: 16px;
            &:first-child {
                color: #666666;
            }
            &:last-child {
                color: #fb6e08;
            }
        }
    }
}
</style>
