<template>
    <div class="hot-product">
        <div
            class="img"
            style="
                background-image: url(https://img-qn.51miz.com/Photo/2017/05/03/21/P240300_c527399b08d2fc5c0c46c6764cca1e0f.jpg);
            "
        ></div>

        <div class="text">
            需求侧
        </div>
    </div>
</template>

<script>
export default {
    name: 'HotProduct'
};
</script>

<style lang="less" scoped>
.hot-product {
    position: relative;
    overflow: hidden;
    .img {
        height: 0;
        padding-top: 48%;
        background-size: cover;
        background-position: center center;
        transition: transform ease-in-out 0.3s;
    }

    .text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        font-size: 38px;
        color: #ffffff;
        line-height: 49px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 2;
        .flex();
        justify-content: center;
    }
    cursor: pointer;

    &:hover {
        .img {
            transform: scale(1.1);
        }
    }
}
</style>
