<template>
    <div class="service-card-list-whole">
        <div class="item">
            <div class="item-top">
                <div class="item-top-left">
                    <div class="no">NO.56253526484759844156</div>
                    <div class="gift">赠品</div>
                </div>
                <div class="address"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {}
};
</script>
<style lang="scss" scoped>
.service-card-list-whole {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.36rem;
    .item {
        width: 6.92rem;
        height: 3.84rem;
        position: relative;
        // background: linear-gradient(
        //     -48deg,
        //     rgba(255, 169, 67, 1) 0%,
        //     rgba(255, 199, 112, 1) 100%
        // );
        box-shadow: 0.08rem 0.08rem 0.08rem 0 rgba(44, 44, 44, 0.15);
        // border-radius: 0.08rem;
        box-sizing: border-box;
        padding: 0.2rem 0.3rem 0 0.4rem;
        background-image: url("../assets/images/card.png");
        color: white;
        .item-top {
            display: flex;
            align-items: center;
            .item-top-left {
                flex-grow: 1;
                display: flex;
                align-items: center;
                .no {
                    font-size: 0.18rem;
                    margin-right: 0.15rem;
                }
                .gift {
                    background-color: #ffe2c7;
                    color: #ff8a1d;
                    font-size: 0.2rem;
                    width: 0.7rem;
                    height: 0.3rem;
                    text-align: center;
                    line-height: 0.3rem;
                    border-radius: 0.15rem;
                }
            }
            .address {
                flex-shrink: 0;
            }
        }
    }
}
</style>
